实现模糊搜索结果关键词高亮

实现模糊搜索结果关键词高亮

    // 搜索加黑
    const handleSearch = (text, keywords = '') => {
      // 校验类型
      if (!isString(text) || !isString(keywords)) {
        throw new Error('text or keywords should be string');
      }
      let res = '';
      const reg = new RegExp(keywords, 'ig');
      // 校验text是否包含keywords
      if (!reg.test(text)) return text;
    
      // 将text 拆分成非keywords和keywords组成的数组
      const splitArr = text.split(reg);
      const arr = text.match(reg);
    
      // 将关键字高亮并拼成字符串
      for (let i = 0; i < splitArr.length - 1; i++) {
        res += `<span>${splitArr[i]}</span><span style="background:#a1d2f0">${
          arr[i]
        }</span>`;
      }
      res += `<span>${splitArr[splitArr.length - 1] || ''}</span>`;
    
      return res;
    };
    
    // 校验是否是字符串类型
    const isString = str =>
      Object.prototype.toString.call(str) === '[object String]';
    
    export default handleSearch;