前言：两种实现方式
构建方法：最简单，拿来就用，但是自定义高亮样式，同一个页面，是要使用一次，就要重新定义写一次。
构建类： 调用复杂一点点，但是一次实例，自定义的样式就可以保存在实例对象中，不用重复定义
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>"
