瀏覽器自帶的查找功能（ctrl + f），是怎么實(shí)現(xiàn)將查找到的文字變色的？

圖片描述

有什么辦法可以實(shí)現(xiàn)類似功能嗎，想在tabble表格上面加一個搜索功能，匹配到的文字可以變色

大家的意思基本都是通過動態(tài)改變網(wǎng)頁元素的屬性或者替換元素來改變。
但是現(xiàn)在我想找的是，不改變網(wǎng)頁元素的屬性，我想知道網(wǎng)頁搜索變色的原理，網(wǎng)頁搜索變色之后，在DOM元素上并不能找到控制顏色的屬性。

回答

編輯回答

避風(fēng)港

我感覺應(yīng)該是這個思路，就是替換一下，把沒有顏色得文字替換為有顏色得文字

<!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>
      請輸入要替換的內(nèi)容：
      <input type="text" name="precontent" id="text01" value="" />
      請輸入替換后的內(nèi)容：
      <input type="text" name="reconteent" id="text02" value="" />
     <button onclick="replace()">替換</button>
      <div id="article" class="comment">
         在HTML&CSS中，如何最科學(xué)地將文字顯示在圖片正中間？ 7 回答 | 已解決

怎樣讓這個文字隨著瀏覽器寬度自動換行？ 1 回答 | 已解決
求一份瀏覽器中html css javascript jquery ajax的渲染順序與原理??！ 1 回答 | 已解決
node.js + express 加載html頁面后只能顯示文字提示圖片 css文件加載404錯誤 1 回答 | 已解決
如何用JavaScript實(shí)現(xiàn)如下動畫文字 6 回答
WeUI樣式庫中僅引用了.css為什么瀏覽器中顯示.less文件 ? 3 回答 | 已解決
如何在火狐瀏覽器中讓多行文字只顯示兩行且多余的文字用省略號代替 1 回答
css排版，在微信和uc中，文字下方出現(xiàn)空白 1 回答
如何隱藏滾動條但又能滾動，不用js實(shí)現(xiàn) 1 回答
</div>

 </body>

</html>

2018年6月14日 04:43

編輯回答

小曖昧

給table里有內(nèi)容的增加個class.遍歷獲得值,匹配上就改變顏色

2017年2月21日 17:17

編輯回答

情已空

這個我剛好前幾天做了...原因是因?yàn)橛泻芏嘤脩舨恢罏g覽器是可以用來搜索頁面內(nèi)容的-_-||，效果很簡單，用戶在輸入框內(nèi)輸入要查找的內(nèi)容，如果頁面中存在就實(shí)時變色，和瀏覽器自帶的效果是一樣的。

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

HTML部分：
一個輸入框，輸入后實(shí)時顯示匹配到的內(nèi)容。

<style>
.highlight{
    background: yellow; 
    color: red;
 }
</style>
<input type="text" class="text"  placeholder="請輸入查詢關(guān)鍵字..." 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');//創(chuàng)建正則表達(dá)式，g表示全局的，如果不用g， 則查找到第一個就不會繼續(xù)向下查找了
            var content = $("#app").text(); //要查找的內(nèi)容
            if (!regExp.test(content)) { 
                alert("沒有找到，請核對關(guān)鍵字"); 
                return; 
            } else { 
                if (sCurText != searchText) { 
                    sCurText = searchText; 
                } 
            }
            //將找到的內(nèi)容替換，加上highlight屬性； 
            $('.contractName').each(function(){ 
                var html = $(this).html(); 
                     var newHtml = html.replace(regExp, '<span class="highlight">'+searchText+'</span>'); 
                $(this).html(newHtml);//更新； 
             });
        }
    })

2018年3月5日 02:48