前端代码 一段字符串 已知多组词分别在句中索引的起始位置，如何让这些词在字符串中的位置变为红色

可以使用 JavaScript 中的字符串操作和 DOM 操作来实现这个功能。具体步骤如下：

1. 将前端代码字符串解析为 DOM 元素。
2. 遍历多组词，根据起始位置找到对应的文本节点。
3. 为这些文本节点添加一个样式，使它们的文字变为红色。

以下是示例代码：

// 假设字符串为 htmlStr，多组词存储在 wordList 中
const htmlStr = '<div><p>Hello world! This is a test.</p></div>';
const wordList = [
  { word: 'Hello', startIndex: 8 },
  { word: 'test', startIndex: 24 }
];

// 创建一个临时容器，将字符串解析为 DOM 元素
const tempContainer = document.createElement('div');
tempContainer.innerHTML = htmlStr;

// 遍历词列表，找到对应的文本节点并添加样式
wordList.forEach(({ word, startIndex }) => {
  const textNode = findTextNode(tempContainer, startIndex, word.length);
  if (textNode) {
    const spanNode = document.createElement('span');
    spanNode.style.color = 'red';
    spanNode.textContent = word;
    textNode.parentNode.replaceChild(spanNode, textNode);
  }
});

// 将处理后的 DOM 元素转化为字符串并输出
const outputStr = tempContainer.innerHTML;
console.log(outputStr);

// 在 DOM 树中查找对应的文本节点
function findTextNode(container, startIndex, length) {
  let currentNode = container.firstChild;
  let currentIndex = 0;
  while (currentNode) {
    if (currentNode.nodeType === Node.TEXT_NODE) {
      const textLength = currentNode.textContent.length;
      if (currentIndex + textLength >= startIndex + length) {
        const startOffset = Math.max(startIndex - currentIndex, 0);
        const endOffset = length - (currentIndex + textLength - startIndex - length);
        return currentNode.splitText(startOffset).splitText(endOffset - startOffset);
      }
      currentIndex += textLength;
    } else {
      const result = findTextNode(currentNode, startIndex - currentIndex, length);
      if (result) return result;
    }
    currentNode = currentNode.nextSibling;
  }
  return null;
}

在上述代码中，我们首先将前端代码字符串解析为 DOM 元素，并将其存储在一个临时容器中。然后遍历词列表，找到对应的文本节点，并为其添加一个红色样式。最后，我们将处理后的 DOM 元素转化为字符串并输出。注意，在查找文本节点时需要处理嵌套的元素节点。