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

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

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

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

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

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

so 以下兩個方法

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

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

//二 利用 JavaScript 的 RegExp 對象
//更推薦使用

var data = [{"title": "少兒保障、理財全能少兒產(chǎn)品"},
            {"title": "少兒保障、理財全能幼兒產(chǎn)品"},
            {"title": "少兒保障、理財全能成年產(chǎn)品"},
            {"title": "少兒保障、理財全能老年產(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一下僅供參考歡迎更正補充 end

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102745.html

相關(guān)文章

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

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

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

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

Luosunce 2019-08-23 13:05 評論0 收藏0
JS核心知識點梳理——正則篇（下）

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

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

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

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

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

LiuZh 2019-08-23 12:26 評論0 收藏0