官方 demo, 一看就知道这个库是干嘛的 bvaughn.github.io/react-highl…

核心是 ighlight-words-core 这个库的 findAll 方法

github.com/bvaughn/hig…

函数入参

例如：

const str = 'abcdefg'
const words = ['a', 'e']

拿到所有匹配

• 执行 defaultFindChunks 方法, 使用 while 循环 和 正则查找匹配字符，while 循环是为了查找到字符串末尾，

  • 实际上可以用 String.prototype.matchAll 来做, 代码更简洁，返回的可迭代对象，使用 Array.from() 转成数组，

    返回值 这里已经拿到了所有匹配

    [
        { start: 0, end: 1 },
        { start: 5, end: 6 }
    ]
    

处理重复匹配的问题

• 之后要对这些匹配到的进行处理

  处理 words = ['a', 'ab'] 或者 words = ['b', 'ab', 'c', 'bc'] 这些重复匹配的情况，并且把重复的地方合并

• 首先 以 start 进行排序, 之后使用强大的 reduce 方法，判断后一个的 start 是否小于等于上一个的 end

  • 如果是，取两个 end 的最大值，作为合并后的 end， 因为之前 按照了 start 排序，所以直接取上一个的 start 作为合并后的 start，

  • 如果不是，那不需要合并

找到所有字符串的起止位置

对匹配到的遍历，处理一下越界，向数组 push 就行了

渲染

最后的最后，数组的 map 循环, mark 标签高亮字符