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

简介: 前端 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>"


目录
相关文章
|
10天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
38 0
|
7天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
18 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
10天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
67 1
前端JS发起的请求能暂停吗?
|
1天前
|
前端开发 JavaScript Serverless
前端新手建议收藏的JavaScript 代码技巧
前端新手建议收藏的JavaScript 代码技巧
11 3
|
1天前
|
设计模式 前端开发 JavaScript
关于写好前端JS代码的一些建议
关于写好前端JS代码的一些建议
10 2
|
9天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
36 3
|
10天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
13天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
28 2
|
3天前
|
前端开发 JavaScript
阿里云验证码2.0 验证时报错 前端页面获取的验证参数有问题,动态JS加载失败,请问怎么解决啊?急,急,急。
用户反馈校验时遇到错误,日志显示验证码参数获取异常。采用无痕验证,失败后,返回`{captchaResult:false,bizResult:false}`,未触发滑块二次验证。
|
4天前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
12 0