javaScript使用正则实现搜索结果中搜索关键字高亮

实现搜索结果中高亮搜索关键字，想法是动态的将结果中的关键字外面包一层带样式的html标签。

这里需要使用String的replace方法，该方法第一个参数可以是字符串或者正则表达式，第二个参数可以是字符串或者函数。该方法会用第一个参数来匹配字符串，再将匹配到的结果用第二个参数替换。

string.replace( String/RegExp, String/Function )

如果第二个参数是一个函数，该函数将接受三个参数。

string.replace(/a/, function('匹配项', '匹配项的位置', '原始字符串'){
	return // 返回新的替换值
})

第二个参数的是函数的好处时，我们可以动态返回新的值用来替换匹配到的结果。

/*
/* @keyword 搜索的关键字
/* @resStr 搜索结果
*/
function hightLight(keyword, resStr){
    let patternStr = keyword.split(""); // 先将搜索结果字符串分解成数组(['r','e','s'])
    patternStr = patternStr.join("|");  // 再将数组使用"|"拼接("r|e|s")
    
    // 由于这个正则表达式跟传入的resStr有关，所以不能Perl语法来声明。
    // 因为正则的构造函数接受一个字符串作为参数，所以用实例的方式来声明这个正则，( /r|e|s/g )
    // 用'|'分割表示字符串的每个字符是否匹配'r'或者'e'或者's'，这样就能从字符串中找出所有搜索关键字。
    let pattern = new RegExp(patternStr, "g"); // 这里因为要全局匹配，所以传入第二个参数"g"
    
    let highLightStr = pattern.replace(pattern, function(match){
        // 在匹配项外面包一层span标签并返回用来替换字符串匹配到的结果
        return `<span style="color: red;">${match}</span>` 
    })
    return highLightStr
}

效果如下