开发中常常遇到类似于搜索引擎一样的关键词着色,突出显示关键词比如标红, 以下只是解决问题的一两种方法, 当然方法有很多, 需要再进一步的思考

示例代码

  1. const title = '关键词a, 关键词b, 关键词c, 其他剩余文本';
  3. // 关键词可以是以逗号分隔的字符串, 也可以是数组
  4. const keyWords = '关键词a, 关键词b';

解决方案

方案一

  1. /**
  2.  * @desc: 主要使用数组循环以及正则匹配
  3.  * @params: 返回替换后的字符串
  4.  */
  5. function formateKeyWords() {
  6.   // 此处判断是否为数组, 即少去一步
  7.   const arr = keyWords.replace(/\s/g, '').split(',');
  8.   let formtedTitle = title;
  9.   arr.forEach(keyword => {
  10.     if (formtedTitle.includes(keyword)) {
  11.       formtedTitle = formtedTitle.replace(new RegExp(keyword, 'g'), '<span>'+keyword+'</span>');
  12.     }
  13.   });
  15.     return formtedTitle;
  16. }

方案二

  1. /**
  2.  * @desc: 单纯使用正则匹配
  3.  * @params: 返回替换后的字符串
  4.  */
  6. function formateKeyWords() {
  7.     const trimKeywords = keyWords.replace(/\s+?/g, '');
  8.     const r = new RegExp(trimKeywords.replace(/,/g, '|'));
  9.     const r1 = new RegExp(r, 'g');
  10.     const formatedTitle = title.replace(r1, match => '<span>'+ match +'</span>');
  11.   return formatedTitle;
  12. }

React

在React 中使用

  1. import React from 'react'
  3. // 无论使用哪种方法都可以, 这里使用第二种
  4. function LabelWithColor({ text, keyWords, color }) {
  5.     const trimKeywords = keyWords.replace(/\s+?/g, '');
  6.     const r = new RegExp(trimKeywords.replace(/,/g, '|'));
  7.     const r1 = new RegExp(r, 'g');
  8.     const formatedTitle = text.replace(r1, match => `<span style={{ color }}>{match}</span>`);
  9.   return (
  10.       <span dangerouslySetInnerHTML={{ __html: formatedTitle }} />
  11.    );
  12. }

以上可以根据具体情况做些改造, 比如关键词的分隔符, 加些类型判断

参考资料