html5中加亮文本,html实现高亮关键字

正则优化一：仅处理位于标签内的元素

var formatKeyword = text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') // 转义处理keyword包含的特殊字符，如 /.

var finder = new RegExp(">.*?"++".*?

element.innerHTML = element.innerHTML.replace(finder,function(matched){

return matched.replace(text,"
"+text+)

})// 对提取的标签内文本进行关键字替换

以能解决大多数问题，但依旧存在的问题是,只要标签属性存在类似 < 符号，将会打破匹配规则导致正则提取内容错误, HTML5 dataset 可以自定义任意内容，故这些特殊字符是无法避免的。

替换

(推荐教程：html教程)

正则优化二：清除可能影响的标签

keyword

=》将闭合标签用变量替换

[replaced1]keyword[replaced2]//闭合标签内 id="keyword" 不会被处理

=》

[replaced1]keyword[replaced2]

=》将暂存变量 replaced 替换为原先标签

keyword

问题：如果 [replaced1] 包含 keyword, 那么替换时将发生异常。

最重要的，当标签值中包含 <> 符号时，此方法也不能正确的提取标签。

总之在经过了N多尝试之后，通过正则都没能有效的处理各种情况。然后换了个思路，不通过字符串的方式，通过节点处理。element.childNodes 可以最有效的清理标签内的干扰信息。

[完美解决方案]通过 DOM 节点处理

keyword 1

keyword 2

通过 parent.childNodes 得到所有子节点。child 节点可以通过 innerText.replce(keyword,result) 的方式替换得到想要的高亮效果,如下： keyword 2 (递归处理：当child节点不含子节点时进行replace操作)。

但是 keyword 1 是属于文本节点，只能修改文本内容，无法增加 HTML，更无法单独控制其样式。而文本节点也不能转换为普通节点。

html5中加亮文本,html实现高亮关键字相关推荐

HTML中消除文本框的高亮边框
大家都知道form表单中的 input type="text " 默认的边框在点击时是高亮的,那么如何消除这个高亮边框做到和别人家的搜索框一样的效果呢? 方法很简单下面贴代码: ...
c语言内部超链接,HTML5中文本元素超链接的属性
本章主要探讨HTML5中文本元素重要的一个超链接,探讨它自身的属性以及路径问题. 超链接的属性元素属于文本元素,有一些私有属性或者叫局部属性.那么,相对应的还有通用属性或叫做全局属性.这方面的知识, ...
vue项目中一行文本文字根据关键字改变颜色改变展示颜色2
vue项目中一行文本文字根据关键字改变颜色改变展示颜色2 <script src="https://unpkg.com/vue@3/dist/vue.global.js&qu ...
#HTML5网页中的文本与图像
HTML5网页中的文本与图像无序列表首先欢迎大家来看我信息安全小萌新的博客!下面我会和大家分享我对于HTML5的学习经验,今天我很想的是HTML5网页中的文本与图像处理问题. 我先放一个案例,通过 ...
HTML5中常见的列表标签包括,介绍几个常用的HTML5标签
一.Html的基本结构: 网页的文本.图片等信息: 二.Head部分:用于表示网页的元数据即描述网页的基本信息其常用标签及属性有: 1.title标签:浏览器标签页显示的标题 2.meta标签:其常 ...
HTML5 - contenteditable 富文本编辑器
简介上图是我自己没事用 contenteditable 写着玩的,一个有点像 VS Code 的脚本编辑器.主要是脚本要根据类型高亮,比如方法名黄色.关键字紫色. contenteditable 是 ...
变身抓重点小能手：机器学习中的文本摘要入门指南 | 资源
鱼羊编译整理量子位出品 | 公众号 QbitAI 如果你是科研狗,一定有过被摘要支配的恐惧. 如果你想在浩如烟海的互联网信息里寻找重点,一定想要快速排除多余的内容. 基于机器学习的自动文本摘要工 ...
Python使用标准库zipfile+re提取docx文档中超链接文本和链接地址
推荐教材: <Python程序设计实用教程>,ISBN:978-7-5635-6065-3,董付国,北京邮电大学出版社教材封面: 全国各地新华书店有售京东购买链接: 配套资源:教学大纲 ...
微信小程序实时搜索并高亮关键字
微信小程序实现实时搜索并高亮关键字的功能效果一.效果图二.实现流程: 1.在文本框中输入关键字key,如"比赛",检索出比赛相关的列表 key = 小程序 2.处理结果列表:在 ...

html5中加亮文本,html实现高亮关键字

html5中加亮文本,html实现高亮关键字相关推荐

最新文章

热门文章