JS关键字标红的两种方法

使用关键字搜索，搜索结果中的关键字部分标红：

第一种方法：

比较简单，严格匹配关键字。忽略大小写；

join(str,key){
	var reg = new RegExp((`(${key})`), "gi");
	var replace = '<span style="color:#FD463E;font-weight:bold;">$1</span>';
	return str.replace(reg, replace);
},

比较简单，严格匹配关键字。忽略大小写；

没有处理空格：比如：

搜索“iphonex”的搜索结果：

 而搜索“iphone x”的搜索结果：

第二种方法：

单独匹配某个字母，中间空格也可以处理；但会把多余的字也标红

如图：搜索“iphone x”和搜索“iphonex”的搜索结果是一样的：

showKeyWord(val,key) {
	// 1.传入关键词数组keyWordArr
	let keyWordArr = key.split('');
	let str = val;
	let strArr = val.split('');
	console.log('showKeyWord',strArr);
	let newStr=''
	if(key && key != '') {
		for(let i=0;i<strArr.length;i++) {
			// 2.定制关键词对应正则
			keyWordArr.forEach(e => {
			    let regStr = '' + `(${e})`;
			    let reg = new RegExp(regStr,"gi");
			    // 3.正则替换，关键词飘红
			    if(strArr[i].indexOf('span') == -1) {
                     //会将搜索结果的字符串替换成与关键字同样的字符（大小写一样）
				     // strArr[i] = strArr[i].replace(reg, '<span style="color:red;">'+ e +'</span>')
                     //使用$1，是匹配第一个小括号的表达式，搜索结果大小写还与原来一致，没有改变，只是标红
                     strArr[i] = strArr[i].replace(reg, '<span style="color:red;">$1</span>')
			    } 
		    })
	    }				    
    }
	console.log('标红',strArr.join(''))
	return strArr.join('');
},