搜索关键字高亮 JS replace() 变量的全局替换

v1 发布于2019-08-23 16:09 / 1763人阅读

摘要：通常搜索回来关键字高亮是后端直接拼好字符串给我们的。当然也有例如后端偶尔不想做，那就我们替换下好了没有的。

通常搜索回来关键字高亮是后端直接拼好字符串给我们的。
当然也有例如后端偶尔不想做，那就我们替换下好了...
JS没有replaceAll的。

//错误示范
var data = "圣诞节卡都是快乐的事快乐速度回家快乐";
var key = "快乐";
data.replace(key,"替换"); 》》》 只替换了第一个快乐

data.replace(/key/g,"替换") 》》》 完全不替换

so 以下两个方法

//一 利用 JavaScript eval() 函数
//应该避免或减少使用eval 不安全，非常耗性能（2次，一次解析成js语句，一次执行）

var data = "圣诞节卡都是快乐的事快乐速度回家快乐";
var key = "快乐";
var reg = eval("/"+key+"/g");
data.replace(reg,"替换")

//二 利用 JavaScript 的 RegExp 对象
//更推荐使用

var data = [{"title": "少儿保障、理财全能少儿产品"},
            {"title": "少儿保障、理财全能幼儿产品"},
            {"title": "少儿保障、理财全能成年产品"},
            {"title": "少儿保障、理财全能老年产品"}
            ]

var search_key = "少儿";
var reg = new RegExp(search_key,"g");
var html = "";
for(var i=0; i< data.length; i++){
 html += ""+data[i].title.replace(reg,(""+search_key+""))+""
}

console.log(html)

mark一下仅供参考欢迎更正补充 end

超融合服务器云服务器 js全局变量是否是线程安全的 js全局变量释放 js 里取全局变量 js全局变量无法使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102745.html

微信小程序实现全局搜索高亮

摘要：需求最近在做微信小程序的时候，需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果，目前的思路是，递归后台来返回的数据，并将对象的值替换为需要的节点，并且通过来实现，高亮效果。需求最近在做微信小程序的时候，需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果，目前的思路是，递归后台来返回的数据，并将对象的value值替换为需要的dom节点，并且通过rich-text来实现，...

Aklman 2019-08-22 16:24 评论0 收藏0
前端本地模糊搜索并高亮

摘要：项目需求是通过搜索关键字显示符合搜索条件的用户，搜索条件是用户昵称和用户唯一号码是一串数字，其中昵称支持中文匹配和首字母拼音匹配。项目需求是通过搜索关键字显示符合搜索条件的用户，搜索条件是用户昵称和用户唯一号码（是一串数字），其中昵称支持中文匹配和首字母拼音匹配。首先说说自己的想法： 1.既然要支持拼音搜索那么必须要一个能把中文转化成拼音的东西（我是在网上找的大佬的代码，一般像这种...

Luosunce 2019-08-23 13:05 评论0 收藏0
JS核心知识点梳理——正则篇（下）

摘要：正则引言正则是一个前端必须掌握的知识。但是由于用的少，忘了记，记了忘，导致面试经常坐蜡。这里上篇先介绍正则的规则，下篇结合一些具体题目，带大家重新学习巩固一下正则，争取面试给自己加分。正则 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言正则是一个前端必须掌握的知识。但是由于用的少，忘了记，记了忘，导致面...

jemygraw 2019-08-26 13:47 评论0 收藏0
HTML高亮关键字真麻烦

摘要：有这么一个功能在网页中高亮关键字。如下当为时，会将名也错误的替换掉关键字父节点通过来进行背景染色处理，对原始有一定程度污染，可能对再次定位造成影响。有这么一个功能：在网页中高亮关键字。本以为一个 innerHTML replace 就能实现的简单操作，却遇到了许多的问题。本文就记录这些问题和最终的完美解决办法，希望能对有同样遭遇的小伙伴有所帮助。只对结果感兴趣的，忽略过程，直接跳过...

livem 2019-08-02 11:47 评论0 收藏0
HTML高亮关键字真麻烦

摘要：有这么一个功能在网页中高亮关键字。如下当为时，会将名也错误的替换掉关键字父节点通过来进行背景染色处理，对原始有一定程度污染，可能对再次定位造成影响。有这么一个功能：在网页中高亮关键字。本以为一个 innerHTML replace 就能实现的简单操作，却遇到了许多的问题。本文就记录这些问题和最终的完美解决办法，希望能对有同样遭遇的小伙伴有所帮助。只对结果感兴趣的，忽略过程，直接跳过...

LiuZh 2019-08-23 12:26 评论0 收藏0