js给搜索关键字的文字添加背景颜色

已于 2022-02-28 13:33:50 修改
阅读量1.6k 收藏 6
点赞数 1
文章标签： javascript 前端 开发语言
于 2022-02-23 16:47:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43059898/article/details/123093908
版权 
第一种
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input id="input" />
    <button id="btn">高亮</button>
    <div id="text">1111高亮</div>
    <script type="text/javascript">
      document.getElementById("btn").onclick = function () {
        let inputValue = document.getElementById("input").value;
        if(!inputValue) {
            return alert('文本框不能为空~')
        }
          let name = '1111高亮'
        let text = document.getElementById('text')
        // 清楚默认历史颜色样式
        text.innerHTML = name;
        if (inputValue) {
          fHl(text, inputValue);
        }
      };

      //--------begin function fHl(o, flag, rndColor, url)------------------//
      function fHl(o, flag, rndColor, url) {
        /// <summary>
        ///     使用 javascript HTML DOM 高亮显示页面特定字词.
        ///     实例:
        ///         fHl(document.body, '纸伞|她');
        ///         这里的body是指高亮body里面的内容。
        ///         fHl(document.body, '希望|愁怨', false, '/');
        ///         fHl(document.getElementById('at_main'), '独自|飘过|悠长', true, 'search.asp?keyword=');
        ///         这里的'at_main'是指高亮id='at_main'的div里面的内容。search.asp?keyword=指给关键字加的链接地址，
        ///         我这里加了一个参数，在后面要用到。可以是任意的地址。
        /// </summary>
        /// <param name="o" type="Object">
        ///     对象, 要进行高亮显示的对象.
        /// </param>
        /// <param name="flag" type="String">
        ///     字符串, 要进行高亮的词或多个词, 使用 竖杠(|) 分隔多个词 .
        /// </param>
        /// <param name="rndColor" type="Boolean">
        ///     布尔值, 是否随机显示文字背景色与文字颜色, true 表示随机显示.
        /// </param>
        /// <param name="url" type="String">
        ///     URI, 是否对高亮的词添加链接.
        /// </param>
        /// <return></return>
        var bgCor = (fgCor = "");
        if (rndColor) {
          bgCor = fRndCor(10, 20);
          fgCor = fRndCor(230, 255);
        } else {
          bgCor = "#ccc";
          fgCor = "black";
        }
        var re = new RegExp(flag, "i");
        for (var i = 0; i < o.childNodes.length; i++) {
          var o_ = o.childNodes[i];
          var o_p = o_.parentNode;
          if (o_.nodeType == 1) {
            fHl(o_, flag, rndColor, url);
          } else if (o_.nodeType == 3) {
            if (!(o_p.nodeName == "A")) {
              if (o_.data.search(re) == -1) continue;
              var temp = fEleA(o_.data, flag);
              o_p.replaceChild(temp, o_);
            }
          }
        }
        //------------------------------------------------
        function fEleA(text, flag) {
          var style =
            ' style="background-color:' + bgCor + ";color:" + fgCor + ';" ';
          var o = document.createElement("span");
          var str = "";
          var re = new RegExp("(" + flag + ")", "gi");
          if (url) {
            str = text.replace(
              re,
              '<a href="' + url + '$1"' + style + ">$1</a>"
            ); //这里是给关键字加链接，红色的$1是指上面链接地址后的具体参数。
          } else {
            str = text.replace(re, "<span " + style + ">$1</span>"); //不加链接时显示
          }
          o.innerHTML = str;
          return o;
        }
        //------------------------------------------------
        function fRndCor(under, over) {
          if (arguments.length == 1) {
            var over = under;
            under = 0;
          } else if (arguments.length == 0) {
            var under = 0;
            var over = 255;
          }
          var r = fRandomBy(under, over).toString(16);
          r = padNum(r, r, 2);
          var g = fRandomBy(under, over).toString(16);
          g = padNum(g, g, 2);
          var b = fRandomBy(under, over).toString(16);
          b = padNum(b, b, 2);
          //defaultStatus=r+' '+g+' '+b
          return "#" + r + g + b;
          function fRandomBy(under, over) {
            switch (arguments.length) {
              case 1:
                return parseInt(Math.random() * under + 1);
              case 2:
                return parseInt(Math.random() * (over - under + 1) + under);
              default:
                return 0;
            }
          }
          function padNum(str, num, len) {
            var temp = "";
            for (var i = 0; i < len; temp += num, i++);
            return (temp = (temp += str).substr(temp.length - len));
          }
        }
      }
      //--------end function fHl(o, flag, rndColor, url)--------------------//
      //]]>
    </script>
  </body>
</html>


第二种
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS关键字文本高亮</title>
<style>
  #content {
    height: 200px;
    overflow-y: scroll;
  }
</style>
</head>
  <body>
  
    <input type="text" id="text" placeholder="请输入关键字"/>
    <input type="button" id="button" value="确定"/>

    <div id="content">
     <h2>
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。 前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。 前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
      前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。
      HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
     </h2>

    </div>
    <script>
       var content = document.getElementById("content");
       var contents = content.innerHTML;
       var text = document.getElementById("text");
       var button = document.getElementById("button");
       button.onclick = function() {
         var value = text.value;
         var values = contents.split(value);
         content.innerHTML = values.join('<span style="background:red;">' + value + '</span>');
       };
    </script>
  </body>
</html>
今晚来我家吗
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS关键字变色实现思路及代码
10-27
JS关键字变色详细很多朋友都很想实现吧接下来将执行以下几个步骤：1.替换关键字，对字体变色2.用正则，CSS背景变色;该方法可结合前台JS调用，感兴趣的朋友可以参考下，希望可以帮助到你
[canvas,js]彩色文字墙
01-31
在canvas上 画出大小不同，颜色不同的指定的文字 目的是铺满这个屏幕 可以用于做罗列关键字的背景 同时，给鼠标移动添加事件，当鼠标移动，会画出一系列渐渐变大的圈圈
浅谈JavaScript实现关键字文本高亮显示
热门推荐
筱葭的博客
04-15 1万+
前端通常是指网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，现在最新的高级版本HTML5、CSS3，以及SVG等。 HTML、CSS、JavaScript是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相
用JS实现变换背景和字体颜色
weixin_34356310的博客
08-26 963
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.5.1/jquery.min.js"></script> <script> //setTimeout ...
js改变字符串中指定字符的颜色
m0_60645026的博客
05-15 3148
1.先用正则指定改变颜色的字符，g表示全局匹配 2.获取页面元素 3.将匹配到的字符用新的样式代替 4.解析标签 //e为要改变颜色的字符（传入的参数） //this.brief是指定的字符串 searchinfo(e){ let res=new RegExp("("+e+")",'g'); let b=document.querySelector('.brief') let a; a=this.bri
JS关键字标红的两种方法
liuye066的专栏
08-19 3732
单独匹配某个字母，中间空格也可以处理；但会把多余的字也标红。比较简单，严格匹配关键字。比较简单，严格匹配关键字。
html——js将匹配关键字使其变为红色
知北行的博客
07-18 3898
js将匹配关键字使其变为红色 /** * 将关键字变为红色 * @param str 待处理字符串 * @param keyWord 关键字字符串 * @returns {*} 将关键字变为红色加粗后的字符串 */ function changeKeyRed(str,keyWord) { if(str!=null&&keyWord!=null
js实现匹配到文字设置为红色
qq_44146522的博客
12-23 2154
js实现匹配到文字设置为红色
利用js实现搜索关键字变红色无标题
IT_qslong的博客
11-30 1058
利用js实现搜索关键字变红色
js利用replace()方法让搜索的关键字，变成红色
qq_21896051的博客
08-21 2872
$(".finKey").each(function () { var str=$(this).text(); // alert(str); var substr="/${param.searchValue}/g"; var replaceStr=str.replace(eval(substr),"<span style='color:red;font-weight:bo...
程序天下:JavaScript实例自学手册
07-08
11.1 背景颜色测试 11.2 RGB颜色在线转换 11.3 颜色切换板 11.4 下拉菜单 11.5 左键弹出式菜单 11.6 目录样式的下拉菜单 11.7 网页中的选项卡 11.8 静态导航菜单 11.9 烟花效果的下拉菜单 11.10 网络导航条 11.11 ...
javaScript实例自学手册486例,附带目录可方便搜索
02-20
1.33 页面背景颜色渐变.htm 1.34 自动滚屏.htm 1.35 在页面中画点.htm 1.36 页面顶部颜色渐变特效.htm 1.37 页面打开时的百叶窗效果.htm 1.38 页面源代码的加密.htm 1.4 页面的后退、刷新、前进.htm 1.5 ...
《JavaScript实例精通》[源代码]
09-21
6_3.htm 利用搜索引擎引用来高亮页面关键字。 6_4.htm 使用匿名函数为定时器传递参数。 6_5.htm Web页面中的tooltip提示。 6_6.htm 在Web页面中控制其元素的选择状态。 第7章（\7） 示例描述：JavaScript的...
《程序天下：JavaScript实例自学手册》光盘源码
02-08
11.1 背景颜色测试 11.2 RGB颜色在线转换 11.3 颜色切换板 11.4 下拉菜单 11.5 左键弹出式菜单 11.6 目录样式的下拉菜单 11.7 网页中的选项卡 11.8 静态导航菜单 11.9 烟花效果的下拉菜单 11.10 网络导航条 11.11 ...
js点击改变文字颜色和背景色
weixin_30552635的博客
07-22 1763
.personal { background-color: #3A99FF; color: #fff; padding-left: 10px; } .personalTwo { /* color: #fff; */ width: 66px; height: 33px; color: #3A99FF; backg...
js将搜索的关键字加颜色
weixin_40923558的博客
08-23 399
使用正则匹配关键字并加入span标签，页面渲染时使用v-html渲染即可。
js、jq、点击改变字体颜色背景色
林中明月间丶
03-01 8786
js:css:.zhuantai{width: 90%;height: 70px;border-top: 1px solid #bdbcbc; border-bottom: 1px solid #bdbcbc; margin: 10px auto;}.yinye{display: inline-block;height: 70px;width: 30%;float: left;color: #ff...
HTML <!DOCTYPE> 标签
魔侠的沙滩
05-07 663
HTML 标签 实例 文档的标题 文档的内容...... 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera           所有浏览器都支持 声明。 定义和用法 声明必须是 HTML
openlayers绘制经纬网格，有添加或者移除功能
最新发布
qq_52959651的博客
05-21 118
我的项目是vue写的，当点击多选框显示隐藏经纬网格，下面直接写代码。项目需要在地图中添加经纬网格，然后看了一下官网有相关的介绍。这是删除图层相关的网站。这是绘制经纬网格方法。
js canvas添加背景颜色
09-14
要在JavaScript的canvas上添加背景颜色，你可以使用canvas的上下文（context）对象的`fillStyle`属性来设置背景颜色，然后使用`fillRect`方法来绘制一个填充矩形，以覆盖整个canvas。 首先，你需要创建一个canvas...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值