HTML字符串中高亮关键字

答案 HTML字符串中高亮关键字 说明 假设你在实现一个搜索建议。

当输入关键词的时候，你需要在建议中高亮关键词，你如何做到？

简单起见，请实现一个函数highlightKeywords(html:string, keywords: string[])，这个函数接受一段HTML字符串，然后用<em> 高亮关键词。

这是一个例子。

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

注意你需要使用最少的<em>，避免重复添加。

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

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

注意空格需要被排除在外。

ps: 又是被题目整懵的一天，这道题需要注意的就是下面这个案例

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

答案

//摘自评论区，我自己没写出来
function highlightKeywords(html, keywords) {
  const regExp = new RegExp(keywords.join('|'), 'ig');
  return html.split(' ').map(word => {\
      //如果keywords里包含整个单词，直接返回
    if (keywords.includes(word)) return `<em>${word}</em>`;
    //否则，要判段是否一个单词里添加了两个em标签
    return word.replace(regExp, (w) => `<em>${w}</em>`).replace('</em><em>', '');
  }).join(' ')
};