如何在<p>标签内为指定文本包裹span标签？现有代码求修正

原代码的核心问题：

• 循环里反复拆分innerHTML，既冗余又容易因为DOM变化导致内容不一致
• 找到目标单词后直接把新<span>追加到<p>标签末尾，不是替换原有的单词，自然看不到预期的包裹效果

方法1：字符串替换（简单直接） #

适合内容确定、无XSS风险的场景：

const pTag = document.querySelector('p');
// 用正则匹配独立单词，避免误匹配类似"Formatting"的词，g表示全局替换所有匹配项
pTag.innerHTML = pTag.innerHTML.replace(/\bFormat\b/g, '<span>$&</span>');

这里\b是单词边界，$&代表匹配到的原单词，直接用它填充到span标签里。

方法2：DOM节点操作（更安全） #

如果担心innerHTML带来的XSS风险，用纯DOM操作拆分文本节点处理：

const pTag = document.querySelector('p');
const nodes = Array.from(pTag.childNodes);

nodes.forEach(node => {
  // 只处理文本类型的节点
  if (node.nodeType === Node.TEXT_NODE) {
    const words = node.textContent.split(' ');
    node.remove(); // 先把原文本节点删掉

    words.forEach((word, idx) => {
      if (word === 'Format') {
        const span = document.createElement('span');
        span.textContent = word;
        pTag.appendChild(span);
      } else {
        pTag.appendChild(document.createTextNode(word));
      }
      // 除了最后一个单词，添加空格分隔
      if (idx !== words.length - 1) {
        pTag.appendChild(document.createTextNode(' '));
      }
    });
  }
});

基于原代码的修改版本 #

要是想保留原代码的思路，得先把所有内容拆出来处理完再重新插入：

const dtag = document.querySelector('p');
const words = dtag.innerHTML.split(' ');
dtag.innerHTML = ''; // 清空原内容

words.forEach(word => {
  if (word === 'Format') {
    const span = document.createElement('span');
    span.textContent = word;
    dtag.appendChild(span);
  } else {
    dtag.appendChild(document.createTextNode(word));
  }
  // 添加空格
  dtag.appendChild(document.createTextNode(' '));
});
// 删掉最后多余的空格
dtag.removeChild(dtag.lastChild);

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