最近項(xiàng)目遇到一個(gè)問(wèn)題，要求搜索關(guān)鍵詞，支持大小寫(xiě)匹配，搜索了很多百度文章都是正則replace，但是都會(huì)有一個(gè)問(wèn)題 替換的標(biāo)簽也會(huì)被匹配到。查閱資料，發(fā)現(xiàn)正則分組是個(gè)好東西，感興趣可以自行搜索正則分組http://www.itdecent.cn/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;

? ? },