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();
},