如何用JavaScript检测.parentContainer内的ABC123文本、包裹文本并给对应图片加类

• 当前代码的逻辑是在.parentContainer末尾额外追加一段写死的ABC123文本，没有对页面原本存在的ABC123文本做包裹操作，会出现文本重复的问题
• 多个匹配元素共用同一个id="abc123"不符合HTML规范，全局唯一的id如果重复会导致DOM选择、样式匹配出现不可预期的问题

需求1：包裹原生ABC123文本 #

• 遍历每个.parentContainer内部的所有文本节点，定位包含ABC123的原生文本片段
• 拆分文本节点的内容，将ABC123片段从原文本中分离，替换为指定的div包裹容器，保留其余文本的原位置、原结构
• 给多个包裹容器生成带序号后缀的唯一id，在兼顾需求的同时符合HTML规范

需求2：匹配文本后给容器内图片加类名 #

• 在检测到当前容器存在ABC123文本的判断分支内，在当前容器的DOM作用域内查找对应的图片元素，通过classList.add()添加自定义类，不使用全局选择器，避免跨容器误选元素

const parentContainers = document.querySelectorAll('.parentContainer');

parentContainers.forEach((container, containerIndex) => {
  // 跳过不包含ABC123的容器
  if (!container.innerText.includes('ABC123')) return;

  // 给当前容器内的图片添加自定义类
  const productImg = container.querySelector('.productImage img');
  if (productImg) {
    productImg.classList.add('abc123-tagged');
  }

  // 遍历容器内的所有文本节点，定位包含ABC123的片段
  const textWalker = document.createTreeWalker(
    container,
    NodeFilter.SHOW_TEXT,
    null
  );

  let currentNode;
  while (currentNode = textWalker.nextNode()) {
    const textValue = currentNode.nodeValue;
    if (!textValue.includes('ABC123')) continue;

    // 拆分文本：分离ABC123前后的内容
    const textParts = textValue.split('ABC123');
    // 把当前节点更新为ABC123前面的内容
    currentNode.nodeValue = textParts[0];

    // 创建包裹div，生成唯一id
    const wrapBox = document.createElement('div');
    wrapBox.id = `abc123-${containerIndex}`;
    wrapBox.textContent = 'ABC123';
    currentNode.after(wrapBox);

    // 插入ABC123后面的剩余文本
    if (textParts[1]) {
      const tailNode = document.createTextNode(textParts[1]);
      wrapBox.after(tailNode);
    }
    break;
  }
});

对应补充的CSS规则：

/* 图片添加类对应的自定义样式 */
.abc123-tagged {
  outline: 3px solid orange;
}
/* 保留原有自定义样式即可 */
.parentContainer {
  padding: 10px;
  border: 2px solid black;
  margin: 10px 0;
}

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