小程序输入搜索关键词，出搜索结果后标红显示功能

原需求： 输入关键词后，搜索结果处标红显示

代码

// wxml代码
<van-cell-group>
    <van-field bind:input="handleInput" value="{{ position }}" label="快捷输入" use-button-slot placeholder="请输入具体位置" input-align="right">
        <van-button bindtap="handleAddResult" data-type="search" slot="button" color="#d94d35" plain size="mini" type="primary">
                添加
        </van-button>
    </van-field>
</van-cell-group>

<van-cell-group>
    <van-cell wx:for="{{ resultList }}" wx:key="id">
        <view slot="title">
            <rich-text nodes="{{ item.content_str }}"></rich-text>
        </view>
        <van-button bindtap="handleAddResult" data-source="{{ item }}" data-type="result" color="#d94d35" plain size="mini" type="primary">
                添加
        </van-button>
    </van-cell>
</van-cell-group>

handleInput(e) {
    let resultList = e.detail ? this.data.options.filter(item => item.content.includes(e.detail)) : []
    resultList.forEach(item => {
        let index = item.content.indexOf(e.detail);
        if (index >= 0) {
            item.content_str = item.content.replace(new RegExp(e.detail, "gm"), '<span style="color:red;">' + e.detail + '</span>');
        }
    });
    this.setData({
        position: e.detail,
        resultList
    })
},

总结：使用小程序原生组件rich-text来渲染被处理成html代码的搜索词