搜索结果关键词高亮如何实现?

发布于 7 年前作者 gnailiy 3252 次浏览来自问答

6493EB72-AFDC-495E-8235-F4A4EF433E39.png

求问,一般论坛的搜索接口,返回的是字符串或者字符串数组,通常是还未经过加工处理的字符串(描述的不好,就是纯字符,不带dom标签)。那获取结果之后,渲染dom,在vue 或者 react 中,大多数时候都直接用{{}} 渲染了,那怎么样才能实现像图中的那样的关键词高亮呢? 在渲染之前,字符串也没办法带上标记啊。

2 回复

MiYogurt 1楼•7 年前

str.replace

hyper-god 2楼•7 年前

你想渲染用户输入的文本为dom节点. 必须先替换 < 这种字符防止 跨站脚本攻击. 然后你可以在渲染之前 replace 你的特定字符,并在前后加上dom标签. 根据 vue 或者 react 自己的方法渲染节点. 框架默认都是输出为普通字符,不渲染标签

搜索结果关键词高亮如何实现? - CNode技术社区