收藏
回答

小程序如何实现类似效果,就这种搜索关键词颜色改变的效果?

有没有大神提供一下思路,非常感谢

回答关注问题邀请回答
收藏

3 个回答

  • optimistic
    optimistic
    2023-10-18

    假设搜索关键词是:搜索,假设返回值是一个 string,这里简化场景,具体要根据自己的数据结构做:

    let keyword = '搜索';
    const searchResult = '这是搜索的结果';
    const arr = searchResult.split(keyword);
    const renderList = [];
    if (arr.length > 1) {
      arr.forEach((item) => {
        renderList.push({
          type: 'text',
          value: item,
        });
        // 标红关键字
        renderList.push({
          type: 'red',
          value: keyword,
        });
      });
    } else {
      console.log(searchResult);
    }
    
    
    


    如果想标红分隔的关键字,就要做正则匹配了,相对复杂一些,但是基本思路是这样

    2023-10-18
    有用 1
    回复 1
    • llnn
      llnn
      2023-10-18
      ok,感谢大佬
      2023-10-18
      回复
  • 零²⁰²⁴
    零²⁰²⁴
    2023-10-18

    匹配后生成 html 通过 rich-text 展示

    参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

    2023-10-18
    有用 1
    回复 1
    • llnn
      llnn
      2023-10-18
      好的,谢谢大佬
      2023-10-18
      回复
  • 何涛
    何涛
    2023-10-19

    如果涉及到分词,楼上的算法就不太OK了,需要用到搜索服务的 关键词加亮 功能,es,shpinx都有这样的功能

    2023-10-19
    有用
    回复
登录 后发表内容