最近項目遇到一個問題劫笙，要求搜索關(guān)鍵詞，支持大小寫匹配星岗，搜索了很多百度文章都是正則replace填大，但是都會有一個問題 替換的標(biāo)簽也會被匹配到。查閱資料俏橘，發(fā)現(xiàn)正則分組是個好東西允华，感興趣可以自行搜索正則分組http://www.reibang.com/p/2b1557f60967(正則分組匹配介紹)，搜索關(guān)鍵詞高亮方法直接上代碼
支持多字符空格匹配
highlights(list, str) {
? ? ? ? str = str + ''
? ? ? ? //將str代碼支離為HTML片段和文字片段寥掐，其中文字片段用于正則替換處理靴寂，而HTML片段置之不理
? ? ? ? var tags = /[^<>]+|<(\/?)([A-Za-z]+)([^<>]*)>/g;
? ? ? ? var a = str.match(tags);
? ? ? ? if (a) {
? ? ? ? ? ? list.map((searchText)=>{
? ? ? ? ? ? ? ? if(searchText.lightinput !== "" && searchText.lightinput) {
? ? ? ? ? ? ? ? ? ? for (let i = 0; i < a.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? var content = a[i];
? ? ? ? ? ? ? ? ? ? ? ? if (!/<(?:.|\s)*?>/.test(content)) { //非標(biāo)簽
? ? ? ? ? ? ? ? ? ? ? ? ? ? // foreach search keyword.
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var keyWords = searchText.lightinput.trim().split(" ");//關(guān)鍵字去空格變成數(shù)組
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for (let k = 0; k < keyWords.length; k++) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 匹配關(guān)鍵字正則
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let replaceReg = new RegExp("("+keyWords[k]+")", "gmi");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? content = content.replace(replaceReg,"♂"+k+"$1♀")；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? content = content.replace(/♂(\d)/g,`<mark style="background: ${searchText.color}">`).replace(/♀/ig,"</mark>");
? ? ? ? ? ? ? ? ? ? ? ? a[i] = content;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? ? return a.join("");
? ? ? ? }
? ? ? ? return str;
? ? },
