文本部分高亮算法

文本部分高亮算法简述

统计信息：字数 2382 阅读5分钟

需求

在一段字符串中，需要把某些词语高亮显示（搜索结果高亮，违规内容高亮）

难重点

正则表达式操作字符串，split 和 match 的使用

思路

使用正则表达式处理字符串，实现某些词语高亮

1、获取原始数据（字符串 str 需要高亮的词语数组 arr）

2、把需要高亮的词语数组，转换成正则表达式

3、使用正则表达式处理字符串，获取匹配到的全部结果数组

4、使用正则表达式处理字符串，获取去掉高亮部分的结果数组

5、使用循环，把高亮部分和不需要高亮的部分，拼接起来，并转换成 dom 输出

代码实现

// 1、获取原始数据（字符串 str 需要高亮的词语数组 arr）
let str = 'asdfghjkl xsnjxs ok test njxsjxs';
let arr = ['ok', 'test'];

// 2、把需要高亮的词语数组，转换成正则表达式
let reg = new RegExp(arr.join('|'), 'ig');

// 3、使用正则处理字符串，获取匹配到的全部结果数组
let matches = str.match(reg);

// 4、使用正则表处理字符串，获取去掉高亮部分的结果数组
let cleans = str.split(reg);

// 5、使用循环，把高亮部分和不需要高亮的部分，拼接起来，并转换成 dom 输出
let res = [];

for (let 1 = 0; i < matches.length; i++) {
  let curr = (
    <>
    <span>{cleans[i]}</span>
    <span syle={{color: 'red'}}>{matches[i]}</span>
    </>
  );
  res.push(curr);
}

// 加上最后一个（如果有）
if (cleans[cleans.length - 1]) {
  res.push(cleans[cleans.length - 1])
}

// 返回 dom 结构
return (<div>{res}</div>); 

全部代码

// import react

const highlighter = (children, highlight) => {
  const regexp = new RegExp(escapeRegExp(highlight.join('|')), 'ig'); 
  // 说明：escapeRegExp 特殊符号转义，避免正则表达式报错

  const matches = children.match(regexp);
  let parts = children.split(regexp);

  for (let i = 0; i < parts.length - 1; i++) {
    parts[i] = (
      <React.Fragment key={i}>
        {parts[i]}
    <span style={{color: 'red'}}>{matches[i]}</span>
      </React.Fragment>
    );
  }

  return <div className="highlighter">{parts}</div>;
}; 

性能分析

主要是 match split 和 一次循环。如果字符串中有 N 个匹配，那么就是 N 次运算。

---

Last update: November 9, 2024