BFE.devAI解答 - JavaScript 代码题
55. HTML字符串中高亮关键字

思路：

1. 遍历关键词数组，根据每个关键词生成正则表达式，并用replace方法将关键词替换成带有<em>标签的关键词。
2. 通过正则表达式可以实现全局替换并且忽略大小写。
3. 为了避免重复添加<em>标签，可以优先替换更长的关键词，如果有冲突，则替换成包含更多关键词的标签。

代码实现如下：

function highlightKeywords(html, keywords) {
  // 根据字符串长度排序，长度相同则按顺序排
  keywords.sort((a, b) => b.length - a.length || keywords.indexOf(a) - keywords.indexOf(b));
  // 遍历关键词，替换HTML中的关键词
  for (let keyword of keywords) {
    let regex = new RegExp(keyword, 'gi');
    let replaceStr = `<em>${keyword}</em>`;
    html = html.replace(regex, replaceStr);
  }
  return html;
}

测试：

console.log(highlightKeywords('Hello FrontEnd Lovers', ['Hello', 'Front', 'JavaScript']));
// '<em>Hello</em> <em>Front</em>End Lovers'

console.log(highlightKeywords('Hello FrontEnd Lovers', ['Front', 'End', 'JavaScript']));
// 'Hello <em>FrontEnd</em> Lovers'

console.log(highlightKeywords('Hello FrontEnd Lovers', ['Front', 'FrontEnd', 'JavaScript']));
// 'Hello <em>FrontEnd</em> Lovers'

注意原始字符串不会被修改，因为String.replace方法返回值是新的字符串。