如何在不将文本转为HTML元素的前提下为div内指定文本高亮变色

核心思路：不对原始文本做HTML解析，直接将文本按关键词拆分后分别渲染为普通文本节点和带样式的行内元素，从根源上避免XSS安全风险。

React 场景实现 #

编写通用高亮处理函数，将拆分后的内容作为React节点数组返回，直接在JSX中渲染即可：

/**
 * 文本关键词高亮工具函数
 * @param {string} text 原始文本
 * @param {string} keyword 要高亮的关键词
 * @param {Object} highlightStyle 自定义高亮样式
 * @returns 可直接渲染的React节点数组
 */
const highlightKeyword = (text, keyword, highlightStyle = { color: 'red' }) => {
  // 转义关键词中的正则特殊字符，避免报错
  const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  // 按关键词拆分文本，保留关键词本身
  const parts = text.split(new RegExp(`(${escapedKeyword})`, 'gi'));
  return parts.map((part, index) => {
    // 匹配到关键词时返回带样式的span，其余返回普通文本
    if (part.toLowerCase() === keyword.toLowerCase()) {
      return <span key={index} style={highlightStyle}>{part}</span>;
    }
    return part;
  });
};

使用示例：

function DemoComponent() {
  const content = "这里有第一个devil，这里是第二个devil，其余内容正常显示";
  return (
    <div style={{ color: 'white' }}>
      {highlightKeyword(content, 'devil')}
    </div>
  );
}

如果需要匹配多个关键词，只需调整正则部分传入关键词数组即可。

原生JavaScript 场景实现 #

通过操作文本节点的方式实现，全程不使用innerHTML，无安全风险：

/**
 * 给指定元素内的关键词添加高亮
 * @param {HTMLElement} element 要处理的DOM元素
 * @param {string} keyword 要高亮的关键词
 */
function highlightText(element, keyword) {
  const escapedKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const matchReg = new RegExp(`(${escapedKeyword})`, 'gi');
  const textNodes = Array.from(element.childNodes).filter(node => node.nodeType === Node.TEXT_NODE);

  textNodes.forEach(textNode => {
    const originText = textNode.textContent;
    const parts = originText.split(matchReg);
    // 没有匹配到关键词则跳过
    if (parts.length <= 1) return;
    // 移除原文本节点，替换为拆分后的文本节点和高亮span
    textNode.remove();
    parts.forEach(part => {
      if (matchReg.test(part)) {
        const highlightSpan = document.createElement('span');
        highlightSpan.style.color = 'red';
        highlightSpan.textContent = part;
        element.appendChild(highlightSpan);
      } else {
        element.appendChild(document.createTextNode(part));
      }
    });
  });
}

使用示例：

const targetDiv = document.querySelector('#target-div');
// 先给元素赋值原始文本
targetDiv.textContent = "这里有第一个devil，这里是第二个devil，其余内容正常显示";
// 执行高亮
highlightText(targetDiv, 'devil');

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture