需求背景：

将一段文本中的指定 多个关键词 标红。

需求分析及特殊情况

多关键词需要逐一匹配
标红即：将命中关键词的套上 <span style="color: red"><span> 标签
例1：['你好', '你好呀'] 为关键词，文本中有 ’你好呀‘ 时，’你好呀‘ 三个字都要标红
例2：['真好', '好人'] 为关键词，文本中有 ’真好人‘ 时，’真好人‘ 三个字都要标红
例3：['大大'] 为关键词，文本中有 ’大大大‘ 时，’大大大‘ 三个字都要标红

解决代码

/*** 处理关键词标红* @param {string} sourceStr 文本* @param {string[]} keywordArr 关键词数组* @return {string} resultStr 返回的 HTML string*/
function disposeKeyword(sourceStr: string = '', keywordArr: any[] = []) {let resultStr: any = ''; // 最终返回的字符串htmlconst getReplaceStr = (str: string) => `<span class="color-red">${str}</span>`;let indexArr: number[] = []; // 需要标红的字的下标数组keywordArr.forEach((keyword: string) => {let filterStr = sourceStr;let stopFlag = false;while (!stopFlag && filterStr && keyword) {const index = filterStr.indexOf(keyword); // 返回匹配的第一个字符的下标if (index === -1) stopFlag = true;else {keyword.split('').forEach((s: string, i: number) => {indexArr.push(index + Number(i));});// 替换第一个字符为空格，防止再次匹配//（例1：['你好', '你好呀'] 为关键词，文本中有 ’你好呀‘ 时，’你好呀‘ 三个字都要标红）//（例2：['真好', '好人'] 为关键词，文本中有 ’真好人‘ 时，’真好人‘ 三个字都要标红）//（例3：['大大'] 为关键词，文本中有 ’大大大‘ 时，’大大大‘ 三个字都要标红）filterStr = filterStr.substring(0, index) + ' ' + filterStr.substring(index + 1);}}});indexArr = Array.from(new Set(indexArr)); // 去重// 标红sourceStr.split('').forEach((char: string, charIndex: number) => {resultStr += indexArr.includes(charIndex) ? getReplaceStr(char) : char;});return resultStr;}console.log(disposeKeyword('你好呀，你是一个真好人啊，给你一个大大大的赞！', ['你好', '你好呀', '真好', '好人', '大大']))

思路

遍历关键词数组，找出文本中命中关键词的字，并存储这些字的下标，最后给统计好的下标数组去重，并给每个下标（每个字）都套上标红标签。

因filterStr.indexOf(keyword)只能寻找第一个匹配的关键词位置，所以在找完一个后需要剔除文本中关键词，继续查找
因存在例3情况，所以只可以剔除文本中关键词的第一个字，方便下次匹配
最后直到找不到关键词，再对原文本进行下一个关键词的查找（对应例1、例2情况）

码字不易，觉得有帮助的小伙伴点个赞支持下~

扫描上方二维码关注我的订阅号~

多个关键词高亮/标红-完美版（多种特殊情况均包含）相关推荐

使用php实现搜索关键词加粗高亮变红代码
使用php实现搜索关键词加粗高亮变红代码 html代码 php处理效果图 html代码 <head> <meta http-equiv="Content-Type&quo ...
搜索关键字高亮_Django Haystack 全文检索与关键词高亮
作者:HelloGitHub-追梦人物[1] 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库[2] 点击本文最下方的"阅读原文"即可获取博客提供 RS ...
Diango博客--22.Django Haystack 全文检索与关键词高亮
文章目录 1. Django Haystack 简介 2. 安装 django-haystack和elasticsearch 2 3. 构建容器来运行 elasticsearch 服务 4. 配置 H ...
《渗透测试实战第三版(红队版)》翻译完成
译者雪茗是我的一位朋友,看到她翻译的这个教程后,我觉得非常不错. 译者:Snowming(雪茗) 时间:北京时间 2019-03-17 本书英文名:The Hacker Playbook 3 阅读及 ...
MySQL数据库教程天花板，mysql安装到mysql高级，强|硬宋红康版
MySQL数据库教程天花板,mysql安装到mysql高级,强|硬宋红康版(自用不可外传) 文章目录 MySQL数据库笔记第一部分 MySQL基础篇第01章数据库概述 1. 为什么要使用数据库 ...
iOS UILabel 使用姿势大全（标红关键字）
一.初始化 ? 1 2 3 UILabel *myLabel = [[UILabel alloc] initWithFrame:CGRectMake(40, 40, 120, 44)]; ...
import apex出错，apex标红解决办法
import apex出错,apex标红解决办法运行一个pytorch时发现import apex标红,同时通过阿里云,清华源都无法下载,解决办法如下: apex是英伟达开源的,支持PyTorch框 ...
05-Elasticsearch-DSL高级检索[分页, 分词, 权重, 多条件, 过滤, 排序, 关键词高亮, 深度分页, 滚动搜索, 批量Mget]...
DSL搜索词库准备骚年帅气新闻网新闻闻网新闻网索引准备 PUT /shop {"settings": {"number_of_shards" ...
java 创建日程到期提醒_苹果“快捷指令”日程播报完美版
日程播报是一个常见于"快捷指令"中"早安/晚安"场景中的一项功能.通过与Win10日历时刻同步,可以非常方便的安排未来行程,避免遗忘重要事项.比如这样每天早上 ...

多个关键词高亮/标红-完美版（多种特殊情况均包含）

需求背景：

需求分析及特殊情况

解决代码

思路

码字不易，觉得有帮助的小伙伴点个赞支持下~

扫描上方二维码关注我的订阅号~

多个关键词高亮/标红-完美版（多种特殊情况均包含）相关推荐

最新文章

热门文章