React 遍历数组替换字符串中的数据

最近接到这样一个需求：前端将要展示的文本进行处理，文本中的关键词高亮展示。文本是一段html字符串。关键词是一个数组集合。需要将字符串中的与关键词集合中相同的文本高亮展示，具体做法如下：

    let renderHtml = data.content;   // html文本
    for (let i = 0; i < keyWordList.length; i++) {
       //  遍历关键词集合，利用正则全局匹配的方式进行替换
      renderHtml = renderHtml.replace(new RegExp(keyWordList[i],"gm"),
                    `<span style='color: #FF0000'>${ keyWordList[i] }</span>`);
    };

处理之后的展示如下：

image.png

正则表达式附加参数：

用来扩展表达式的含义，目前主要有三个参数：

• g：代表可以进行全局匹配。
• i：代表不区分大小写匹配。
• m：代表可以进行多行匹配。
• 上面三个参数，可以任意组合，代表复合含义，当然也可以不加参数。