如何用jQuery或原生JavaScript替换HTML标记首个标签的文本内容？

直接用正则匹配HTML标签内容容易因标签属性、特殊字符出现异常，最可靠的方式是借助DOM API处理，步骤如下：

核心思路 #

1. 解码数组中字符串的HTML转义实体（如把<转成<，"转成"）
2. 将解码后的HTML插入临时DOM容器，定位首个子元素
3. 修改该元素的文本内容
4. （可选）将修改后的HTML重新转义为原数组的格式

原生JavaScript实现 #

const array = [
  '<p class="item">text</p>',
  '<h1>hello</h1>',
];

// 定义要替换的新文本
const targetText = "替换后的新内容";

const modifiedArray = array.map(encodedHtml => {
  // 1. 创建临时容器解码HTML实体
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = encodedHtml;

  // 2. 获取首个标签元素
  const firstTag = tempContainer.firstElementChild;
  if (firstTag) {
    // 3. 替换文本内容（textContent自动处理特殊字符，避免XSS风险）
    firstTag.textContent = targetText;
  }

  // 4. 重新转义成原格式（需保持数组转义状态时使用）
  return tempContainer.innerHTML
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
});

console.log(modifiedArray);
// 输出：
// [
//   '&lt;p class=&quot;item&quot;&gt;替换后的新内容&lt;/p&gt;',
//   '&lt;h1&gt;替换后的新内容&lt;/h1&gt;'
// ]

jQuery实现（修正你之前的尝试） #

你之前用jQuery未成功，大概率是没处理HTML转义问题，以下是正确写法：

const array = [
  '<p class="item">text</p>',
  '<h1>hello</h1>',
];

const targetText = "替换后的新内容";

const modifiedArray = array.map(encodedHtml => {
  // 解码并插入临时容器
  const $tempContainer = $('<div>').html(encodedHtml);
  // 找到首个子元素并替换文本
  $tempContainer.children().first().text(targetText);
  
  // 重新转义成原格式
  let resultHtml = $tempContainer.html();
  resultHtml = resultHtml.replace(/</g, '&lt;')
                         .replace(/>/g, '&gt;')
                         .replace(/"/g, '&quot;');
  return resultHtml;
});

注意事项 #

• 若无需保持原数组的HTML转义格式，直接返回tempContainer.innerHTML（原生）或$tempContainer.html()（jQuery）即可
• 使用textContent（原生）或text()（jQuery）替换文本，会自动处理特殊字符；若需插入HTML内容，才用innerHTML或html()

内容的提问来源于stack exchange，提问作者Filou