js原生实现搜索框下拉列表输入框模糊匹配高亮

1、需求

很多搜索列表输入框，输入下拉列表有的文字时做模糊匹配，进行相关文字高亮，（比如需要输入的任意一个字有，列表中对应的那个字就得高亮，不是需要跟输入框的字完全一样 )

2、实现效果：

3、实现方法：

原理就是给特定需要高亮的文字加个class样式，生成一个模版字符串。

注意：我这里是vue所以用v-html解析模版字符串，如果是react用dangerouslySetInnerHTML即可

3.1、正则：

suggest: 字符串原文
highlight: 需高亮文字（比如可以是你的输入框value）
suggestHighlight: 字符串原文包含highlight的加上高亮样式后的html

typescript 复制代码

const renderSuggest = (suggest: string, highlight) => {
    if (highlight) {
      let suggestHighlight = suggest;
      const highlightStrs = highlight?.split("").join("|") || "";
      try {
        suggestHighlight = suggestHighlight.replace(
          new RegExp(`(${highlightStrs})`, "g"),
          `<i class="highlight-tag">$1</i>`
        );
      } catch (e) {
        console.log("suggest error", e);
      }
    }
    return  <div v-html=`${suggestHighlight}` ></div>
  };

// 别忘记定义高亮class
.highlight-tag {
 	color: red;
 }

3.2、工具方法

第一种：

suggest: 字符串原文
highlight: 需高亮文字（比如可以是你的输入框value）
suggestHighlight: 字符串原文包含highlight的加上高亮样式后的html

typescript 复制代码

while (index !== -1) {
    // 添加非高亮部分
    suggestHighlight += suggest.substring(currentIndex, index);

    // 添加高亮部分
    suggestHighlight += `<i class="highlight-tag">${highlight}</i>`;

    // 更新当前索引到已找到的高亮部分之后
    currentIndex = index + highlight.length;

    // 继续查找下一个高亮部分
    index = suggest.indexOf(highlight, currentIndex);
}

// 添加剩余的非高亮部分
suggestHighlight += suggest.substring(currentIndex);


// 别忘记定义高亮class
.highlight-tag {
 	color: red;
 }

第二种：

suggest: 字符串原文
highlight: 需高亮文字（比如可以是你的输入框value）
suggestHighlight: 字符串原文包含highlight的加上高亮样式后的html

typescript 复制代码

const renderSuggest = (suggest: string, highlight: string) => {
    let suggestHighlight = '';

    for (let i = 0; i < suggest.length; i++) {
        const currentChar = suggest[i];
        const isHighlighted = highlight.includes(currentChar);

        // 如果当前字符需要高亮
        if (isHighlighted) {
            suggestHighlight += `<i class="highlight-tag">${currentChar}</i>`;
        } else {
            suggestHighlight += currentChar;
        }
    }

    return  <div v-html="suggestHighlight" ></div>
};

// 别忘记定义高亮class
.highlight-tag {
 	color: red;
 }

end！

希望记录的问题能帮助到你~