Front-end JS classic: rich text highlighting keywords

Preface: Two implementation methods

Construction method: The simplest, just use it, but you can customize the highlight style. If you want to use the same page once, you need to redefine it and write it again.

Building a class: The call is a little complicated, but once it is instanced, the customized style can be saved in the instance object without repeated definitions.

1. Construction method

// 默认样式
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. Build classes

// 定义富文本类
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>"