整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML高亮关键字的完美解决方案

近项目做晕头，一个接一个，其中遇到这样的一个功能，在网页中高亮关键字的实现方法，下面小编把实现代码及解决方案分享给大家，感兴趣的的朋友跟随小编一起看看吧

最近做项目遇到这样的一个功能：在网页中高亮关键字。

本以为一个 innerHTML replace 就能实现的简单操作，却遇到了许多的问题。本文就记录这些问题和最终的完美解决办法， 希望能对有同样遭遇的小伙伴有所帮助。只对结果感兴趣的，忽略过程，直接跳过看结果吧~

常用做法：正则替换

思路：要想高亮元素，那么需要将关键字提取出来用标签包裹，然后对标签进行样式调整。使用 innerHTML，或 outHTML, 而不能使用 innerText,outText。

const regex = new RegExp(keyword,"g")
element.innerHTML = element.innerHTML.replace(regex,"<b class="a">"+keyword+"</b>")
element.classList.add("highlight")

这样做存在的隐患有如下：

()\
div
<div id="parent">
 <div class="test">test</div>
 </div>

关键字父节点 element 通过 class 来进行背景染色处理，对原始DOM有一定程度污染，可能对 element 再次定位造成影响。（作为插件希望尽可能少改变原始DOM）

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

var formatKeyword = text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') // 转义处理keyword包含的特殊字符，如 /.
var finder = new RegExp(">.*?"++".*?<") // 提取位于标签内的文本，避免误操作 class、id 等
 
element.innerHTML = element.innerHTML.replace(finder,function(matched){
 return matched.replace(text,"<br>"+text+</br>)
})// 对提取的标签内文本进行关键字替换

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

<div dataset="p>d">替换</div>

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

<div id="keyword">keyword</div>
 =》将闭合标签用变量替换
 [replaced1]keyword[replaced2]//闭合标签内 id="keyword" 不会被处理
 =》
 [replaced1]<b>keyword</b>[replaced2]
 =》将暂存变量 replaced 替换为原先标签
 <div id="keyword"><b>keyword</b></div>
  • 这种思路及源码从这里来， 但存在问题是：
  • 如果 [replaced1] 包含 keyword, 那么替换时将发生异常

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

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

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

<div id="parent">
 keyword 1
 <span id="child">
 keyword 2
 </span>
 </div>

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

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

最后~，本文的重点来了，因为这个功能，让我第一次认真接触到了文本节点这个东西。从这里发现了Text，使用切割文本节点并替换的方式实现高亮。

源码以及还原高亮见源码

const reg = new RegExp(keyword.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'))
highlight = function (node,reg){
 if (node.nodeType == 3) { //只处理文本节点
 const match = node.data.match(new RegExp(reg));
 if (match) {
 const highlightEl = document.createElement("b");
 highlightEl.dataset.highlight="y"
 const wordNode = node.splitText(match.index)
 wordNode.splitText(match[0].length); // 切割成前 关键词 后三个Text 节点
 const wordNew = document.createTextNode(wordNode.data);
 highlightEl.appendChild(wordNew);//highlight 节点构建成功
 wordNode.parentNode.replaceChild(highlightEl, wordNode);// 替换该文本节点
 }
 } else if (node.nodeType == 1 && node.dataset.highlight!="y"
 ) {
 for (var i = 0; i < node.childNodes.length; i++) {
 highlight(node.childNodes[i], reg);
 i++
 }
 } 
}

总结

以上所述是小编给大家介绍的HTML高亮关键字的完美解决方案，希望对大家有所帮助，

学习从来不是一个人的事情，要有个相互监督的伙伴，想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料，一起学习，一起成长！

经常看到图片有一道高亮光弧闪过很炫的效果，其原理很简单可以用css3动画就可以做出这样的效果，用css3动画控制position:absolute的left值，从左向右闪过，这个具体的请看以下代码哈。效果截图如下：

鼠标houver在盒子box上时动画会停止，代码如下：

<!Doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>

<title>CSS3动画实现高亮光弧效果</title>

<style type="text/css">

body{margin:0;padding:0;}

.box{width:1000px;margin:200px auto;height:500px;position:relative;text-align:center;}

.box:hover .rolled{

-webkit-animation-play-state:paused;

-moz-animation-play-state:paused;

-o-animation-play-state:paused;

-ms-animation-play-state:paused;

}

.rolled{

position:absolute;

top: 0;

width:80px;

height:500px;

background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);

background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));

background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);

background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);

-webkit-transform: skewX(-25deg);

-moz-transform: skewX(-25deg);

-webkit-animation:rolled 2.5s .2s ease both infinite;

-moz-animation:rolled 2.5s .2s ease both infinite;

-o-animation:rolled 2.5s .2s ease both infinite;

-ms-animation:rolled 2.5s .2s ease both infinite;

overflow: hidden;

}

@-webkit-keyframes rolled{

0%{left:-150px ;}

100%{left:920px;}

}

@-moz-keyframes rolled{

0%{left:-150px ;}

100%{left:920px;}

}

@-o-keyframes rolled{

0%{left:-150px ;}

100%{left:920px;}

}

@-ms-keyframes rolled{

0%{left:-150px ;}

100%{left:920px;}

}

@keyframes rolled{

0%{left:-150px ;}

100%{left:920px;}

}

</style>

</head>

<body>

<div class="box">

<img src="http://www.hmttv.cn/uploadfile/2024/0806/20240806113158735.jpg">

<div class="rolled"></div>

</div>

</body>

</html>

查看效果演示：http://tangjiusheng.com/css3/page01.html

另外一种效果，鼠标houver时效果才出现（触发），代码如下：

<!Doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>

<title>CSS3实现高亮光弧效果</title>

<style type="text/css">

body{

margin: 0;padding: 0;

}

.box{width:1000px;margin:200px auto;height:500px;position:relative;text-align:center;}

a.floor:before{

display: block;

height: 500px;

}

a.floor:hover:before{

-webkit-transition: left 1.5s;

-moz-transition: left 1.5s;

transition: left 1.5s;

left: 920px;

}

a.floor:before{

content: "";

position: absolute;

width: 80px;

height:500px;

top: 0;

left: -150px;

overflow: hidden;

background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);

background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));

background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);

background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);

-webkit-transform: skewX(-25deg);

-moz-transform: skewX(-25deg);

}

</style>

</head>

<body>

<div class="box">

<a class="floor" href="#"><img src="http://www.hmttv.cn/uploadfile/2024/0806/20240806113158735.jpg"></a>

</div>

</body>

</html>

除注明外的文章,均为来源:汤久生博客,转载请保留本文地址！

原文链接：http://tangjiusheng.com/css3/125.html

行代码就能让我的网站支持代码高亮的工具库，也支持在 Vue 中使用，强烈推荐给大家。

关于 highlight.js

highlight.js 是一款使用 javascript 开发代码高亮工具库，能够让网页上的代码显示接近我们使用的代码编辑器的高亮样式，从而看起来更舒服，增强阅读体验。

highlight.js 官网截图

highlight.js 的技术特性

  • 支持 197 种开发语言和 246 种代码高亮风格主题
  • 自动开发语言检测
  • 支持多种语言混合代码同时高亮
  • 支持任何 HTML 标签，不仅仅是<code></code>
  • 支持 npm 安装，可以在 Vue.js 中使用，也可以在 node.js 中使用
  • 无依赖，与任何 js 框架兼容

为什么要用 highlight.js

常来我网站的小伙伴都知道，我的文章有一个栏目是“前端”，主要推荐一下实用的前端开源项目或者组件库，写技术类文章免不了要贴代码，我的网站基于 wordpress 搭建，此前我一直为找一款代码高亮插件烦恼，但大部分 wordpress 的代码高亮插件实在太臃肿，出来的样式又不美观。大多时候是截图 VsCode 的代码界面，甚至还用过 codepng 这个工具把代码变成图片贴在文章中，但这样做是美观了，但也存在2个问题：

  • 长代码图片会缩放，阅读体验不佳
  • 搜索引擎不识别，对 SEO 不友好

最终还是找到了 highlight.js，完美解决了上面两个问题，而且配置简单，演示漂亮，定制化简单。不禁感叹：用纯前端的方式解决，才能精准控制，实现想要的效果。

使用教程：为我的网站添加代码高亮功能

下面以我的网站为例，展示将 highlight.js 用在我们的项目上的方法。首先 highlight.js 支持 cdn 直接引入和 npm 安装，我的网站基于 wordpress 开发，主题是自己写的，最简单的方式就是在文章详情页引入 highlight.js 和主题样式。

虽然 highlight.js 支持几百种开发语言，但为了将文件体积控制到最小，我们可以点击“get version”按钮进入下载页，通过勾选我们需要的开发语言，来构建最轻量的库。

下载解压后得到的 highlight.min.js 就是我们需要引入的 js 文件，主题样式都在 style 文件夹里，我选择了一个比较喜欢的 monokai-sublime 主题，只需要一个 css 文件，然后初始化：

<link href="/js/monokai-sublime.min.css" rel="stylesheet" type="text/css">
<script src="/js/highlight.min.js"></script>
<script>
   hljs.highlightAll();
</script>

就是这么简单，highlight.js 会自动将文章中的 <pre><code></code></pre> 代码进行识别语言并且高亮，一切就是这么简单。为了让代码显示更协调，我用几行 css 控制了包裹层的圆角以及背景颜色、字体大小等，大功告成。

.post-content .wp-block-code {
   background-color: #F6F8FF;
   border-radius: 16px;
   font-size: 16px;
   padding: 22px 22px 22px 38px;
   margin-top: 22px;
   margin-bottom: 22px;
}
.post-content .wp-block-code {
   line-height: 1.2;
   font-size: 15px;
   padding: 10px;
   overflow-x: auto;
}
.post-content .wp-block-code code {
   position: relative;
   background-color: unset !important;
}

当然 highlight.js 也能在 vue 项目中使用，安装：

npm install highlight.js

在 Vue 文件中使用 (通过 highlight.js for Vue ) ：

<div id="app">
  <!-- bind to a data property named `code` -->
  <highlightjs autodetect :code="code" />
  <!-- or literal code works as well -->
  <highlightjs language='javascript' code="var x = 5;" />
</div>

需要注意的是，自动识别模式不能100%识别出代码所属的开发语言，识别错误会导致高亮样式是别的语言的，这种情况下可以手动设置一个 class 来精准控制：

<pre><code class="language-javascript">...</code></pre>

官网提供了详尽的使用文档，有更多代码高亮的控制，但不足的就是 highlight.js 没有显示行号的支持，需要通过再引入一个库 (highlightjs-line-numbers.js) 或者自行实现。

免费开源说明

highlight.js 是一款基于 BSD 许可证开源的 javascript 工具库，任何个人和公司都可以免费下载用于自己的项目，包括商用项目。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点击查看本次分享的网址以及代码高亮效果

highlight.js - 让网页上的代码高亮美化的免费开源工具库｜那些免费的砖


在线咨询
上一篇：爬虫入门必学-常见的几种网站类型
下一篇：.NET CORE(C#) WPF 值得推荐的动画菜单设计

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 土默特右旗 乌拉特中旗 绥滨县 揭东县 峨边彝族自治县 乐陵 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服