JavaScript实现标题搜索关键词高亮显示

最新推荐文章于 2023-12-28 14:04:12 发布

飞飞侯

最新推荐文章于 2023-12-28 14:04:12 发布

阅读量632

点赞数

分类专栏：原生JS 文章标签： javascript

本文链接：https://blog.csdn.net/pia_ji/article/details/115006597

版权

本文介绍了如何使用JavaScript实现标题搜索关键词的高亮显示。针对需求，文章提出了一个初步方案，通过循环查找关键词并插入HTML标签来达到高亮效果。但此方案存在一个问题，即无法处理关键词与已插入标签中的子串匹配的情况，例如‘class’或‘s’等。

摘要由CSDN通过智能技术生成

需求：标题搜索keyword，对返回数据str中存在的所有关键词进行高亮显示
解决方案：
a计划（对keyword字符串进行循环，在str中出现keyword的地方插入HTML标签）：
1.插入HTML标签函数

/**
* @param {String} target 需高亮显示的字符串
* @param {String} str 原始字符串
*/
showHigh(target,str){
  let positions = [];
  let pos = str.indexOf(target);
  while (pos > -1) {
    positions.push(pos);
    pos = str.indexOf(target, pos + 1);
  }
  positions = positions.map((item, index) => {
    return (item += 30 * index);
  });
  positions.forEach((item, index) => {
    str =
      str.slice(0, item) + "<span class='higthStr'>" + str.slice(item);
    str =
      str.slice(0, item + 23 + target.length) +
      "</span>" +
      str.slice(item + 23+ target.length);
  });
  return str
}
// 30为插入标签字符串length  23为开始标签length

2.AJ