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