问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

浏览器自带的查找功能 （ctrl + f），是怎么实现将查找到的文字变色的？

头像
刺青爱死了阴谋
    4123
    新手上路，请多包涵

    图片描述图片描述

    有什么办法可以实现类似功能吗，想在tabble表格上面加一个搜索功能，匹配到的文字可以变色

    大家的意思基本都是通过动态改变网页元素的属性或者替换元素来改变。
    但是现在我想找的是，不改变网页元素的属性，我想知道网页搜索变色的原理，网页搜索变色之后，在DOM元素上并不能找到控制颜色的属性。

    javascriptcsshtml
    阅读 11.2k
    3 个回答
    得票最新
    头像
    轻歌曼舞
      123211

      我感觉应该是这个思路，就是替换一下，把没有颜色得文字替换为有颜色得文字

      <!DOCTYPE html>
      <html>

       <head>
      <meta charset="UTF-8">
      <title></title>
 </head>
 <style type="text/css">
      *{
          margin: 0; padding: 0;
      }
      .comment {
          margin: 0 auto;
          width: 1000px;
          font-family: "微软雅黑";
           color: grey;
      }
 </style>
 <script type="text/javascript">
    function replace(){
        var precontent = text01.value;
        var recontent = text02.value;
        //console.log(precontent, recontent);
        
        var str = article.innerHTML;
        
        article.innerHTML = str.replace(new RegExp(precontent,"g"), "<font style='color:red'>"+recontent+"</font>");
        
    }
 </script>
 <body>
      请输入要替换的内容：
      <input type="text" name="precontent" id="text01" value="" />
      请输入替换后的内容：
      <input type="text" name="reconteent" id="text02" value="" />
     <button onclick="replace()">替换</button>
      <div id="article" class="comment">
         在HTML&CSS中，如何最科学地将文字显示在图片正中间？ 7 回答 | 已解决

      怎样让这个文字随着浏览器宽度自动换行？ 1 回答 | 已解决
      求一份浏览器中html css javascript jquery ajax的渲染顺序与原理！！ 1 回答 | 已解决
      node.js + express 加载html页面后只能显示文字 提示图片 css文件加载404错误 1 回答 | 已解决
      如何用JavaScript实现如下动画文字 6 回答
      WeUI样式库中仅引用了.css为什么浏览器中显示.less文件 ? 3 回答 | 已解决
      如何在火狐浏览器中让多行文字只显示两行且多余的文字用省略号代替 1 回答
      css排版，在微信和uc中，文字下方出现空白 1 回答
      如何隐藏滚动条但又能滚动，不用js实现 1 回答
      </div>

       </body>

      </html>

      头像
      家木子猿
        1621719

        给table里有内容的增加个class.遍历获得值,匹配上就改变颜色

        头像
        比比比卡丘
          942612

          这个我刚好前几天做了...原因是因为有很多用户不知道浏览器是可以用来搜索页面内容的-_-||，效果很简单，用户在输入框内输入要查找的内容，如果页面中存在就实时变色，和浏览器自带的效果是一样的。

          直接上代码吧，我是用VUE做的

          HTML部分：
          一个输入框，输入后实时显示匹配到的内容。

          <style>
.highlight{
    background: yellow; 
    color: red;
 }
</style>
<input type="text" class="text"  placeholder="请输入查询关键字..." v-model="name"/>

          JS部分：

          var vm = new Vue({
        el:'#app',
        data:{
            name:''
        },
        methods:{
            clearSelection:function(){ 
                $('.contractName').each(function(){ 
                    //找到所有highlight属性的元素； 
                    $(this).find('.highlight').each(function(){ 
                        $(this).replaceWith($(this).html());//将他们的属性去掉； 
                    }); 
                }); 
            }
        },
        updated: function (){
            var sCurText;
            this.clearSelection();//清空样式
            var searchText = this.name.replace(/\s/gi,"");
            var regExp = new RegExp(searchText, 'g');//创建正则表达式，g表示全局的，如果不用g， 则查找到第一个就不会继续向下查找了
            var content = $("#app").text(); //要查找的内容
            if (!regExp.test(content)) { 
                alert("没有找到，请核对关键字"); 
                return; 
            } else { 
                if (sCurText != searchText) { 
                    sCurText = searchText; 
                } 
            }
            //将找到的内容替换，加上highlight属性； 
            $('.contractName').each(function(){ 
                var html = $(this).html(); 
                     var newHtml = html.replace(regExp, '<span class="highlight">'+searchText+'</span>'); 
                $(this).html(newHtml);//更新； 
             });
        }
    })
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏