JS + CSS 实现高亮关键词(不侵入DOM)

// 高亮关键词的函数
function highlightKeyword(text, keyword) {
  if (!keyword) return text;
  const regex = new RegExp(keyword, 'gi');
  const matches = text.match(regex);
  if (!matches) return text;
  const highlightedText = text.replace(regex, match => `<span class="highlight">${match}</span>`);
  return highlightedText;
}
 
// 使用示例
const text = '这是一段包含JavaScript关键词的文本。';
const keyword = 'JavaScript';
const highlightedText = highlightKeyword(text, keyword);
 
// 假设已经将CSS样式 .highlight { color: red; } 添加到页面中
// 现在可以将highlightedText插入到DOM中，例如:
// document.getElementById('content').innerHTML = highlightedText;

在这个例子中，我们定义了一个highlightKeyword函数，它接受文本和关键词作为参数，并返回一个被高亮的HTML字符串。这个函数使用正则表达式来找到所有的关键词匹配项，并用一个带有highlight类的<span>标签包裹它们，这个类需要在CSS中定义样式。这个函数不直接操作DOM，而是返回可以直接插入DOM中的HTML字符串。这样做可以保持函数的通用性和灵活性，并允许你决定何时和如何将生成的HTML字符串插入到页面中。