实现返回字符串中间某几个字符统一高亮

展示结果示例：在此处输入字符串想要某几个字高亮

通过循环实现高亮

/**
	*highlighted(
          content: '主体文案',
          color: '#ffe700',
          highlightList: [], // 需要高亮的字段数组
        )
*/
const renderHighlight = (
  content: string, 
  color: string, 
  highlightList: string[]
) => {
    // 通过数组分割但保留被分割的值的数组
    const REG = new RegExp(`(${highlightList.join('|')})`, 'g');
    const setContent_list: any = content.split(REG);

    for (let i = 0; i < setContent_list.length; i++) {
      for (let j = 0; j < highlightList.length; j++) {
        // 匹配到需要高亮的值高亮值
        if (setContent_list[i] === highlightList[j]) {
          setContent_list[i] = <span style={{ color }} key={`highlightList-${i}`}>{setContent_list[i]}</span>;
          break;
        }
      }
    }

    return setContent_list
  };

dangerouslySetInnerHTML强制转换

/**
	*highlighted(
          content: '主体文案',
          color: '#ffe700',
          highlightList: [], // 需要高亮的字段数组
        )
*/
const renderHighlight = (
  content: string, 
  color: string, 
  highlightList: string[]
) => {
    highlightList.forEach((item: string) => {
      setContent = content.replace(item, `<span style='color:${color}'>${item}</span>`)
    })
    console.log(setContent, 'setContent')

    return <div dangerouslySetInnerHTML={{ __html: setContent }} />;
  };