如何在innerHTML中插入HTML元素？JS实现指定文本包裹span

现有HTML结构：

<div id="d1"></div>This is a text that <div id="d2"></div>needs to be manipulated

给定起始短语 start = "a text"、结束短语 end = "needs"，需要用JavaScript在起始短语前插入 <span id="phrase_1">，在结束短语后插入 </span>，最终得到：

<div id="d1"></div>This is <span id="phrase_1">a text that <div id="d2"></div>needs</span> to be manipulated

推荐使用DOM操作实现，避免字符串替换破坏HTML结构，代码如下：

假设内容在指定容器中 #

先给目标内容套一个容器（如果原有结构没有的话）：

<div id="target-container">
  <div id="d1"></div>This is a text that <div id="d2"></div>needs to be manipulated
</div>

JavaScript代码 #

const container = document.getElementById('target-container');
const startPhrase = 'a text';
const endPhrase = 'needs';

// 创建要用来包裹的span元素
const wrapSpan = document.createElement('span');
wrapSpan.id = 'phrase_1';

// 1. 定位起始短语所在的文本节点及具体位置
let startTextNode = null;
let startPosition = 0;
const textWalker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
let currentNode;
while (currentNode = textWalker.nextNode()) {
  const phraseIndex = currentNode.textContent.indexOf(startPhrase);
  if (phraseIndex !== -1) {
    startTextNode = currentNode;
    startPosition = phraseIndex;
    break;
  }
}

if (!startTextNode) {
  console.error('未找到起始短语');
  return;
}

// 分割起始文本节点，把短语前的内容单独拆分出来
const beforeStart = startTextNode.splitText(startPosition);
// 在起始短语前插入span元素
beforeStart.after(wrapSpan);

// 2. 定位结束短语所在的文本节点及末尾位置
let endTextNode = null;
let endPosition = 0;
textWalker.currentNode = startTextNode; // 从起始节点开始继续遍历
while (currentNode = textWalker.nextNode()) {
  const phraseIndex = currentNode.textContent.indexOf(endPhrase);
  if (phraseIndex !== -1) {
    endTextNode = currentNode;
    endPosition = phraseIndex + endPhrase.length; // 取短语末尾的位置
    break;
  }
}

if (!endTextNode) {
  console.error('未找到结束短语');
  return;
}

// 分割结束文本节点，把短语后的内容单独拆分出来
const afterEnd = endTextNode.splitText(endPosition);

// 3. 将起始到结束之间的所有节点移入span内部
let currentElement = startTextNode;
while (currentElement !== afterEnd) {
  const nextElement = currentElement.nextSibling;
  wrapSpan.appendChild(currentElement);
  currentElement = nextElement;
}

字符串处理方式（仅适用于无复杂嵌套场景） #

如果只能处理HTML字符串，可使用正则替换，但注意存在误匹配风险（比如短语出现在HTML属性中）：

const originalHtml = '<div id="d1"></div>This is a text that <div id="d2"></div>needs to be manipulated';
const startPhrase = 'a text';
const endPhrase = 'needs';
const regex = new RegExp(`(${startPhrase})([\\s\\S]*?)(${endPhrase})`, 'i');
const modifiedHtml = originalHtml.replace(regex, `<span id="phrase_1">$1$2$3</span>`);
console.log(modifiedHtml);

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