HighLight组件封装

1.思路：

自己在写HighLight组件的时候，是这样的思想：比如说有这么一段字：’王宝强好帅’，高亮词是[‘宝强’,’帅’]，那么我就去遍历这个数组，将数组的元素去匹配文本，将’宝强’和’帅’替换为<span>宝强</span>和<span>帅</span>，最后的结果就是得到这样一个字符串’王<span>宝强</span>好 <span>帅</span>’，再用div包裹一下，最后再通过div的dangerouslySetInnerHTML属性就可以将一个被div字符串包裹的文本变为一个react.element类型的数据了，我们就可以对span标签的样式进行修改了。代码如下：

import React from 'react';

type HighLightProps = {
  content: string;
  highLightWords: string[];
  color: string;
};
const HighLight: React.FC<HighLightProps> = ({
  content,
  highLightWords,
  color,
}) => {
  function spliceContent() {
    // 对数组进行排序，eg：['宝强','王宝强']转为['王宝强','宝强']。因为['宝强','王宝强']在进行高亮的时候【王宝强】三个字只有宝强二字才能够高亮
    const highLightWordsSort = highLightWords.sort(
      (x: string, y: string) => y.length - x.length,
    );
    if (highLightWordsSort.length === 0) {
      return <div>{content}</div>;
    } else {
      let contentCopy = content;
      for (const ele of highLightWordsSort) {
        const reg = new RegExp(ele);
        contentCopy = contentCopy?.replace(
          reg,
          `<span style=color:${color}>${ele}</span>`,
        );
      }
      return (
        <div
          dangerouslySetInnerHTML={{
            __html: `<div>${contentCopy}</div>`,
          }}></div>
      );
    }
  }
  return <>{spliceContent()}</>;
};
export default HighLight;

2.遇到的问题：

但是现在遇到了这么一个问题：’王宝强好帅’如果遇到[‘宝强’,’王宝强’]这样的高亮词，最后只有‘宝强’二字高亮了，‘王’字没有高亮。这是因为第一次匹配了’宝强’之后得到了这样一个结果’ 王<span>宝强</span>好帅’，第二次再匹配’王宝强’的时候是匹配不到的。

3.解决办法：

那么该怎么办呢？细心一点我们会发现如果先匹配’王宝强’再匹配’宝强’的话，结果是这样的’ <span>王<span>宝强</span></span>好帅’，这样是符合预期的。那我们就一开始把这个数组进行一个排序，字多的排到前面就大功告成了，是不是很惊喜，很意外？