使用正则表达式实现搜索结果关键字高亮效果的代码解析

在开发中，我们经常需要在搜索结果中将关键字以某种方式进行高亮显示，以提升用户体验。本文将介绍一种使用正则表达式实现搜索结果关键字高亮的代码。

方法抽离

/**
 * 搜索结果字符串中关键字变色
 * @param {string} searchText 搜索关键字
 * @param {string} resultText 搜索结果字符串
 * @param {string} color 颜色 默认值:red
 * @returns highlightedText 处理后的文字
 */
export function highlightSearchResult(searchText, resultText, color = "red") {
  const regex = new RegExp(searchText, "gi");
  const highlightedText = resultText.replace(
    regex,
    (match) => `<span style="color: ${color}">${match}</span>`,
  );
  return highlightedText;
}

使用

const searchText = "keyword";
const resultText = "This is a sample text containing the searched keyword.";
const highlightedText = highlightSearchResult(searchText, resultText);
console.log(highlightedText);

相关知识点

1.上述代码用到RegExp() | MDN构造函数，new RegExp 是 JavaScript 中用于创建正则表达式对象的构造函数。正则表达式是一种强大的文本模式匹配工具，它可以用于字符串匹配、替换、提取等操作。

/**
 * @param {string} pattern 一个字符串表示正则表达式的模式。它可以包含普通文本字符和特殊字符，用于匹配或查找指定的文本模式。
 * @param {string} flags 一个可选的标志字符串，用于设置正则表达式的匹配规则
 */
const regex = new RegExp(pattern, flags);

2.String.prototype.replace() 是 JavaScript 字符串对象的一个方法，用于将匹配某个模式的部分文本替换为新的文本。它可以在字符串中搜索指定的模式，并将匹配到的部分替换为要求的内容。