关键词高亮效果

序

分享一个常用的的小功能：输入关键词，在列表中高亮显示输入的关键词。如：

效果.gif

实现步骤

1. 思路

让选中的关键字高亮显示，说明要给关键字添加标签，然后给相应标签添加样式。因此关键之处就在于：

1. 匹配关键字
2. 替换关键字为带有标识（标签）的关键字
3. 给标识（标签）添加样式

2. 示例

以vue项目示例

2.1 基础布局

// 数据
data() {
    return {
        // 关键词
        keyword: '',
        // 原数据列表
        texts: [
            {text: '春江潮水连海平，海上明月共潮生。'},
            {text: '滟滟随波千万里，何处春江无月明！'},
            {text: '江流宛转绕芳甸，月照花林皆似霰；'},
            {text: '空里流霜不觉飞，汀上白沙看不见。'},
            {text: '江天一色无纤尘，皎皎空中孤月轮。'},
            {text: '江畔何人初见月？江月何年初照人？'},
            {text: '人生代代无穷已，江月年年望相似。'},
            {text: '不知江月待何人，但见长江送流水。'},
            {text: '白云一片去悠悠，青枫浦上不胜愁。'},
            {text: '谁家今夜扁舟子？何处相思明月楼？'},
            {text: '可怜楼上月裴回，应照离人妆镜台。'},
            {text: '玉户帘中卷不去，捣衣砧上拂还来。'},
            {text: '此时相望不相闻，愿逐月华流照君。'},
            {text: '鸿雁长飞光不度，鱼龙潜跃水成文。'},
            {text: '昨夜闲潭梦落花，可怜春半不还家。'},
            {text: '江水流春去欲尽，江潭落月复西斜。'},
            {text: '斜月沉沉藏海雾，碣石潇湘无限路。'},
            {text: '不知乘月几人归，落月摇情满江树。'}
        ],
        // 处理后的数据列表，要展示到html中去的
        needText: [],
    }
}

// 初始化
mounted() {
    // 初始化时，将原数据列表赋值给needText一份，做初始化的展示
    this.needText = this.texts;
}

然后布局居中即可。完成后如下：

布局完成

2.2 绑定关键词，做关键词替换

将输入内容绑定到 keyword，添加回车事件

刚才说过，做关键词替换，其实就是将关键词替换为带有标签的关键词，那么可以根据正则将文字替换。

先来搞一下关键词和将关键词带上标签：

// 正则，全局
let exp = new RegExp(this.keyword, 'g');
// 带有标签的关键词，此处使用 span 标签，也可以是其他标签
let node = `${this.keyword}`;

正则替换：

// 遍历原数据数组，将替换后的塞到 needText 中去展示即可
this.texts.map((item, index) => {
    item = item.text.replace(exp,node);
    this.needText.push({text: item});
});

注：在替换之前要先将 needText 清空。

将以上两步封装成alternateText方法即可。也就是在方法内部先将 needText 清空，然后正则全局替换关键词为带有 span 标签的关键词。

检验：是否带有 span 标签：

检验span

2.3 将带标签的关键词添加样式

既然标签有了，那么添加样式即可。比如我此处的 class 是 "article"，那么我可以：

.article{
    width: 100%;
    margin: 50px auto;
    &>div{
        text-align: center;
        margin: 15px 0;
+       span{
+           color: orange;
+       }
    }
}

然后尝试一下……发现并没有加上去颜色！

不卖关子了，正确的处理方式是：

.article{
    width: 100%;
    margin: 50px auto;
    &>div{
        text-align: center;
        margin: 15px 0;
-       span{
+       &::v-deep span{
            color: orange;
        }
    }
}

v-deep 小妙招~

OK，重新检验下：

完成

搞定~收工！

完整代码私信我获取~

小结

其实做完后发现还是挺简单的，一个正则替换，将关键字（词）替换为带有标签的关键词，在写样式的时候注意要保证能渲染到 span 标签上即可。另外需要注意的是最好不要在原数据上做修改，不然会导致系列问题，如给原数据添加上标签之后可能会导致后续的关键词覆盖搜索不到等，因此建议将原数据保留，将操作后的数据存的新的变量中去。