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

v1 發布于2019-08-23 16:09 / 1932人閱讀

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

通常搜索回來關鍵字高亮是后端直接拼好字符串給我們的。
當然也有例如后端偶爾不想做，那就我們替換下好了...
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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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