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

  • 搜索文本时高亮
  • 匹配替换(只允许在编辑情况下)
  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. }

方案三

方案三参考自网络, 有缺陷, 比如关键词是数组或者命中多个关键词时

参考

Mark.js
React-highlight-words

  1. /**
  2.  * @name: formatKeyword
  3.  * @description: 搜索关键字标红
  4.  * @param: label: 原文本, value 关键词
  5.  */
  7. import React from 'react';
  9. export default function formatKeyword(label, value) {
  10.   if (!value) {
  11.     return label;
  12.   }
  13.   return (
  14.     <span>
  15.       {label.split(value).reduce((prev, current, i) => {
  16.         if (!i) {
  17.           return [current];
  18.         }
  19.         return prev.concat(
  20.           <span
  21.             style={{ color: '#ff186d' }}
  22.             key={value + current + Math.random() * 100}
  23.           >
  24.             {value}
  25.           </span>,
  26.           current,
  27.         );
  28.       }, [])}
  29.     </span>
  30.   );
  31. }

React

在React 中使用

  1. import React from 'react'
  3. // 无论使用哪种方法都可以, 这里使用第二种
  4. function LabelWithColor({ text, keyWords, color = 'red' }) {
  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: ${color}">${match}</span>`);
  9.   return (
  10.     <span dangerouslySetInnerHTML={{ __html: formatedTitle }} />
  11.    );
  12. }

最终方案

  1. /**
  2.  * @name: HighLightWord
  3.  * @desc: 关键词高亮
  4.  * @author NHF
  5.  */
  7. import React, { Fragment } from 'react';
  9. interface DeepArray<T> extends Array<T | DeepArray<T>> { }
  11. type KeywordTypes = DeepArray<string | string[]> | string;
  12. type KeywordColor = string | { [key: string]: string };
  14. /** 统计记录匹配到字符开始 & 结束位置 */
  15. interface MatchRange {
  16.   /** 开始位置: reg.index */
  17.   start: number;
  18.   /** 结束位置: reg.index + value.length */
  19.   end: number;
  20.   /** 匹配到的字符 */
  21.   value: string;
  22. }
  24. export interface HighlightProps {
  25.   className?: string;
  26.   style?: React.CSSProperties;
  27.   /** 展示字符串 */
  28.   text: string;
  29.   /** 配置的颜色 */
  30.   color?: KeywordColor;
  31.   /** 需要高亮的关键词 */
  32.   keywords?: KeywordTypes;
  33. }
  35. const { toString } = Object.prototype;
  36. const DEFAULT_COLOR = '#f47d31';
  38. const isType = (val: any, type: string) => toString.call(val) === `[object ${type}]`;
  39. const isObject = (val: any) => isType(val, 'Object');
  40. const isString = (val: any) => isType(val, 'String');
  42. /** 去除空格 */
  43. const trimReg: RegExp = /[-[\]{}()*+?.,\\^$|#\s]/g;
  44. function trim(val: any) {
  45.   return isString(val) ? val.replace(trimReg, '') : val;
  46. }
  48. function getTrimKeywords(val: KeywordTypes) {
  49.   if (typeof val === 'string' && val.includes(',')) {
  50.     return val.split(',').map(item => trim(item));
  51.   }
  52.   if (isString(val)) {
  53.     return [trim(val)];
  54.   }
  55.   if (Array.isArray(val)) {
  56.     // give me to your hand
  57.     // don't need trim, should be fix
  58.     // return val.map((item: any) => (isArray(item) ? getTrimKeywords(item) : trim(item)));
  59.     return val.reduce((prev, next) => prev.concat(Array.isArray(next) ? getTrimKeywords(next) : trim(next)), [])
  60.   }
  62.   return [];
  63. }
  65. /** 获取到对应的正则 */
  66. function getKeywordsReg(keywords: KeywordTypes) {
  67.   const $newkeywords = getTrimKeywords(keywords);
  68.   const $reg = [... new Set($newkeywords)].join('|');
  69.   const keywordsReg = new RegExp($reg, 'ig');
  70.   return keywordsReg;
  71. }
  73. /** 获取到对应的颜色 */
  74. function getColorByMatch(match: string, color?: { [key: string]: string } | string) {
  75.   if (isObject(color)) {
  76.     return color[match] || DEFAULT_COLOR;
  77.   }
  78.   return color;
  79. }
  81. /** 统计匹配字符位置及其他信息 */
  82. const getMatchMap = (text: string, reg: RegExp) => {
  83.   const map = new Map();
  84.   const range = Array.from(text.matchAll(reg));
  85.   range.forEach(item => {
  86.     map.set(item.index, {
  87.       value: item[0],
  88.       start: item.index,
  89.       end: item.index + item[0].length
  90.     });
  91.   });
  93.   return map;
  94. }
  96. /** 分隔字符串 拼接 */
  97. const getLastContent = (splited: string[], matchMap: Map<number, MatchRange>, color) => {
  98.   /** 统计使用 */
  99.   let count = 0;
  100.   const list = splited.reduce((prev, next) => {
  101.     count += next.length;
  102.     prev.push(<Fragment key={count}>{next}</Fragment>);
  103.     if (matchMap.has(count) && matchMap.get(count).start === count) {
  104.       const matched = matchMap.get(count);
  105.       count = matched.end;
  106.       prev.push(<span key={`${count}-${matched.start}-${matched.end}`} style={{ color: getColorByMatch(matched.value, color) }}>{matched.value}</span>);
  107.     }
  108.     return prev;
  109.   }, []);
  111.   return list;
  112. }
  114. const HighLightWord: React.FunctionComponent<HighlightProps> = React.memo<HighlightProps>((props) => {
  115.   const { text, color, style, className, keywords } = props;
  116.   if (!text) return null;
  118.   if ((Array.isArray(keywords) && keywords.length === 0 || !keywords) && !!text) {
  119.     return <div className={className} style={style}>{text}</div>
  120.   }
  122.   const keywordReg = getKeywordsReg(keywords);
  123.   const matchMap = getMatchMap(text, keywordReg);
  124.   const splited = text.split(keywordReg);
  125.   const content = getLastContent(splited, matchMap, color);
  127.   return (
  128.     <div className={className} style={style}>
  129.       {content}
  130.     </div>
  131.   );
  132. });
  134. HighLightWord.defaultProps = {
  135.   text: '',
  136.   keywords: '',
  137.   color: DEFAULT_COLOR,
  138. };
  140. export default HighLightWord;

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

参考资料