如何用JavaScript结合React实现按数组索引的字符串高亮显示

核心需求 #

在React组件的div（注意：textarea无法渲染HTML，仅支持纯文本，因此无法实现背景高亮）中显示字符串，并根据给定的索引数组，为指定区间的文本添加背景高亮样式。

解决方案思路 #

直接使用字符串splice方法处理多区间会因为字符串不可变、索引偏移问题导致混乱，更可靠的方式是：

1. 先对高亮区间按起始索引升序排序，确保从左到右依次处理
2. 将原字符串拆分为「普通文本片段」和「高亮文本片段」，用带样式的<span>包裹高亮片段
3. 拼接所有片段为HTML字符串，再通过html-react-parser渲染为React元素

具体实现代码 #

1. 高亮文本处理函数 #

// 生成带高亮标签的HTML字符串
function getHighlightedText(text, highlights) {
  // 按起始索引升序排序区间，避免处理顺序混乱
  const sortedHighlights = [...highlights].sort((a, b) => a.start_highlight - b.start_highlight);
  
  const result = [];
  let lastProcessedIndex = 0;

  for (const { start_highlight: start, end_highlight: end } of sortedHighlights) {
    // 添加高亮区间之前的普通文本
    if (start > lastProcessedIndex) {
      result.push(text.slice(lastProcessedIndex, start));
    }
    // 添加带高亮样式的文本片段
    result.push(`<span style="background-color: #ffeb3b;">${text.slice(start, end)}</span>`);
    lastProcessedIndex = end;
  }

  // 添加最后一段未处理的普通文本
  if (lastProcessedIndex < text.length) {
    result.push(text.slice(lastProcessedIndex));
  }

  return result.join('');
}

2. React组件中使用 #

import Parser from 'html-react-parser';

class HighlightedTextComponent extends React.Component {
  render() {
    // 示例字符串与高亮区间数组
    const targetString = "LopemIpsumLopemIpsumLopemIpsumvLopemIpsumLopemIpsumLopemIpsumLopemIpsumLopemIpsumLopemIpsumLopemIpsumLopemIpsumLopemIpsumLopemIpsumLopemIpsumLopemIpsumLopemIpsum";
    const highlightRanges = [
      { start_highlight: 4, end_highlight: 8 },
      { start_highlight: 15, end_highlight: 30 },
      { start_highlight: 64, end_highlight: 68 }
    ];

    // 生成带高亮的HTML字符串
    const highlightedHtml = getHighlightedText(targetString, highlightRanges);

    return (
      <div className="text-container">
        {Parser(highlightedHtml)}
      </div>
    );
  }
}

注意事项 #

• 重叠区间处理：如果高亮区间存在重叠或嵌套，需要先合并区间（可通过遍历区间数组，合并重叠部分），避免出现重复包裹的情况
• XSS风险：如果文本来自用户输入，需先对文本进行HTML转义处理，防止注入攻击
• 可编辑需求：如果需要可编辑的高亮文本，可使用contentEditable="true"的div，但需额外处理编辑时的高亮逻辑

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