前端 JS 经典: 富文本高亮关键字

前言：两种实现方式

构建方法：最简单，拿来就用，但是自定义高亮样式，同一个页面，是要使用一次，就要重新定义写一次。

构建类：  调用复杂一点点，但是一次实例，自定义的样式就可以保存在实例对象中，不用重复定义

1. 构建方法

// 默认样式
const defaultOption = {
  fontSize: 20,
  fontColor: "red",
  fontWeight: 800,
};

/**
 * 富文本关键字高亮
 * @param {string} str - 富文本字符串
 * @param {string[] | string} high - 高亮词组 | 高亮词
 * @param {object} options - 高亮样式配置
 * @param {number} options.fontSize - 高亮字体大小
 * @param {string} options.fontColor - 高亮字体颜色
 * @param {number} options.fontWeight - 高亮字体粗细
 * @param {object} options.style - css 行内样式放入方式，替换默认高亮样式
 *
 * @return {string} - 返回处理后的富文本
 *
 * @example
 * richTextHigh("我是你爸爸", "爸爸")
 * =>
 * "我是你<span style="font-size: 20px; color: red; font-weight: 800;margin: 0 5px;">爸爸</span>"
 */
function richTextHigh(str, high, options = defaultOption) {
  // 高亮样式
  const { fontSize, fontColor, fontWeight, style } = options;
  const _style =
    style !== undefined
      ? style
      : `font-size: ${fontSize || 20}px; color: ${
          fontColor || "red"
        }; font-weight: ${fontWeight || 800}`;
  // 高亮文字
  const _high = typeof high == "string" ? high : high.join("|");
  // 高亮正则
  const reg = new RegExp(_high, "gi");

  const _str = str.replace(reg, (key) => {
    return `<span style="${_style};margin: 0 5px;">${key}</span>`;
  });
  return _str;
}

2. 构建类

// 定义富文本类
class RichText {
  defaultOption = {
    fontSize: 20,
    fontColor: "red",
    fontWeight: 800,
  };

  options;

  constructor(options = this.defaultOption) {
    this.options = options;
  }

  richTextHigh(str, high) {
    const { fontSize, fontColor, fontWeight, style } = this.options;
    const _style =
      style !== undefined
        ? style
        : `font-size: ${fontSize || 20}px; color: ${
            fontColor || "red"
          }; font-weight: ${fontWeight || 800}`;
    // 高亮文字
    const _high = typeof high == "string" ? high : high.join("|");
    // 高亮正则
    const reg = new RegExp(_high, "gi");

    const _str = str.replace(reg, (key) => {
      return `<span style="${_style};margin: 0 5px;">${key}</span>`;
    });
    return _str;
  }
}

// 实例化, 默认样式
let richText1 = new RichText();
richText1.richTextHigh("我是你爸爸", "爸爸"); // "我是你<span style="font-size: 20px; color: red; font-weight: 800;margin: 0 5px;">爸爸</span>"

// 实例化，自定义样式
let richText2 = new RichText({ style: "font-size: 20px; color: green;" })
richText2.richTextHigh("我是你爸爸", "爸爸"); // "我是你<span style="font-size: 20px; color: green;;margin: 0 5px;">爸爸</span>"