搜索關(guān)鍵字高亮 JS replace() 變量的全局替換

v1 發(fā)布于2019-08-23 16:09 / 2012人閱讀

摘要：通常搜索回來(lái)關(guān)鍵字高亮是后端直接拼好字符串給我們的。當(dāng)然也有例如后端偶爾不想做，那就我們替換下好了沒(méi)有的。

通常搜索回來(lái)關(guān)鍵字高亮是后端直接拼好字符串給我們的。
當(dāng)然也有例如后端偶爾不想做，那就我們替換下好了...
JS沒(méi)有replaceAll的。

//錯(cuò)誤示范
var data = "圣誕節(jié)卡都是快樂(lè)的事快樂(lè)速度回家快樂(lè)";
var key = "快樂(lè)";
data.replace(key,"替換"); 》》》 只替換了第一個(gè)快樂(lè)

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

so 以下兩個(gè)方法

//一 利用 JavaScript eval() 函數(shù)
//應(yīng)該避免或減少使用eval 不安全，非常耗性能（2次，一次解析成js語(yǔ)句，一次執(zhí)行）

var data = "圣誕節(jié)卡都是快樂(lè)的事快樂(lè)速度回家快樂(lè)";
var key = "快樂(lè)";
var reg = eval("/"+key+"/g");
data.replace(reg,"替換")

//二 利用 JavaScript 的 RegExp 對(duì)象
//更推薦使用

var data = [{"title": "少兒保障、理財(cái)全能少兒產(chǎn)品"},
            {"title": "少兒保障、理財(cái)全能幼兒產(chǎn)品"},
            {"title": "少兒保障、理財(cái)全能成年產(chǎn)品"},
            {"title": "少兒保障、理財(cái)全能老年產(chǎn)品"}
            ]

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一下僅供參考歡迎更正補(bǔ)充 end

GPU云服務(wù)器云服務(wù)器 js全局變量是否是線程安全的 js全局變量釋放 js 里取全局變量 js全局變量無(wú)法使用

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/102745.html

相關(guān)文章

微信小程序?qū)崿F(xiàn)全局搜索高亮

摘要：需求最近在做微信小程序的時(shí)候，需要實(shí)現(xiàn)在搜索框的輸入內(nèi)容的時(shí)候?qū)崿F(xiàn)全局匹配實(shí)現(xiàn)高亮效果，目前的思路是，遞歸后臺(tái)來(lái)返回的數(shù)據(jù)，并將對(duì)象的值替換為需要的節(jié)點(diǎn)，并且通過(guò)來(lái)實(shí)現(xiàn)，高亮效果。需求最近在做微信小程序的時(shí)候，需要實(shí)現(xiàn)在搜索框的輸入內(nèi)容的時(shí)候?qū)崿F(xiàn)全局匹配實(shí)現(xiàn)高亮效果，目前的思路是，遞歸后臺(tái)來(lái)返回的數(shù)據(jù)，并將對(duì)象的value值替換為需要的dom節(jié)點(diǎn)，并且通過(guò)rich-text來(lái)實(shí)現(xiàn)，...

Aklman 2019-08-22 16:24 評(píng)論0 收藏0
前端本地模糊搜索并高亮

摘要：項(xiàng)目需求是通過(guò)搜索關(guān)鍵字顯示符合搜索條件的用戶，搜索條件是用戶昵稱和用戶唯一號(hào)碼是一串?dāng)?shù)字，其中昵稱支持中文匹配和首字母拼音匹配。項(xiàng)目需求是通過(guò)搜索關(guān)鍵字顯示符合搜索條件的用戶，搜索條件是用戶昵稱和用戶唯一號(hào)碼（是一串?dāng)?shù)字），其中昵稱支持中文匹配和首字母拼音匹配。首先說(shuō)說(shuō)自己的想法： 1.既然要支持拼音搜索那么必須要一個(gè)能把中文轉(zhuǎn)化成拼音的東西（我是在網(wǎng)上找的大佬的代碼，一般像這種...

Luosunce 2019-08-23 13:05 評(píng)論0 收藏0
JS核心知識(shí)點(diǎn)梳理——正則篇（下）

摘要：正則引言正則是一個(gè)前端必須掌握的知識(shí)。但是由于用的少，忘了記，記了忘，導(dǎo)致面試經(jīng)常坐蠟。這里上篇先介紹正則的規(guī)則，下篇結(jié)合一些具體題目，帶大家重新學(xué)習(xí)鞏固一下正則，爭(zhēng)取面試給自己加分。正則 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言正則是一個(gè)前端必須掌握的知識(shí)。但是由于用的少，忘了記，記了忘，導(dǎo)致面...

jemygraw 2019-08-26 13:47 評(píng)論0 收藏0
HTML高亮關(guān)鍵字真麻煩

摘要：有這么一個(gè)功能在網(wǎng)頁(yè)中高亮關(guān)鍵字。如下當(dāng)為時(shí)，會(huì)將名也錯(cuò)誤的替換掉關(guān)鍵字父節(jié)點(diǎn)通過(guò)來(lái)進(jìn)行背景染色處理，對(duì)原始有一定程度污染，可能對(duì)再次定位造成影響。有這么一個(gè)功能：在網(wǎng)頁(yè)中高亮關(guān)鍵字。本以為一個(gè) innerHTML replace 就能實(shí)現(xiàn)的簡(jiǎn)單操作，卻遇到了許多的問(wèn)題。本文就記錄這些問(wèn)題和最終的完美解決辦法，希望能對(duì)有同樣遭遇的小伙伴有所幫助。只對(duì)結(jié)果感興趣的，忽略過(guò)程，直接跳過(guò)...

livem 2019-08-02 11:47 評(píng)論0 收藏0
HTML高亮關(guān)鍵字真麻煩

摘要：有這么一個(gè)功能在網(wǎng)頁(yè)中高亮關(guān)鍵字。如下當(dāng)為時(shí)，會(huì)將名也錯(cuò)誤的替換掉關(guān)鍵字父節(jié)點(diǎn)通過(guò)來(lái)進(jìn)行背景染色處理，對(duì)原始有一定程度污染，可能對(duì)再次定位造成影響。有這么一個(gè)功能：在網(wǎng)頁(yè)中高亮關(guān)鍵字。本以為一個(gè) innerHTML replace 就能實(shí)現(xiàn)的簡(jiǎn)單操作，卻遇到了許多的問(wèn)題。本文就記錄這些問(wèn)題和最終的完美解決辦法，希望能對(duì)有同樣遭遇的小伙伴有所幫助。只對(duì)結(jié)果感興趣的，忽略過(guò)程，直接跳過(guò)...

LiuZh 2019-08-23 12:26 評(píng)論0 收藏0