Js - replaceAll - 關鍵字反白/頁面搜索關鍵字/網頁搜尋文字/網頁標記文字

 Js  - replaceAll - 關鍵字反白/頁面搜索關鍵字/網頁搜尋文字/網頁標記文字

var result= new Set();
result.add(1); // [1]
result.add(5); // [1, 5]

result是要尋找並劃線的關鍵字們 是一個Set

var x = document.getElementsByTagName("td");

先取得網頁中的內容給x

td是在網頁中哪個標籤的內容需要被搜尋 可以是<p>也可以是<td>等

第一種寫法

     for (var y of result) { 
        for (var i = 0; i < x.length; i++) {
            x[i].innerHTML =x[i].innerHTML.replaceAll(y, "<font style='background-color:#ffdfbf'>" + y + "</font>");

       }                  
   }

透過修改每一個x[i]的html,將有關鍵字的部分做replace加上背景顏色

這邊切記要用replaceAll 不然JS只會改到第一個出現的關鍵字

以上的方法經過實測IE部分版本不支援

IE根據版本不同對JS相容性差異極大

另如:不支援replaceAll 、遍歷Set的of、indexOf、Array.from()、trim()等等等...

把上面這段程式碼改到IE版本皆可用真是燒掉我的腦

因為沒有replaceAll  所以這一段要自己先加上去

 <script language="javascript" type="text/javascript">
  String.prototype.replaceAll = function (FindText,RepText) {
  regExp = new RegExp(FindText, "g");
  return this.replace(regExp,RepText);
  }
</script>

然後才是剛才部分的功能，這一次result使用陣列

（因為當初在需求上有可能給到重覆的result 內容所以一開始用set

    <script> 
         var result = [];
         result.push(1);
         result.push(5);
         var x = document.getElementsByTagName("td");
         for(var y =0; y<result.length;y++){
            for (var i = 0; i < x.length;i++) {   
                 x[i].innerHTML =x[i].innerHTML.replaceAll(result[y], "<font style='background-color:#ffdfbf'>" + result[y] + "</font>");
              }                   
        }        
    </script>