Javascript Bookmarklet用鏈接替換文本

Question

我在HTML頁面上有一些文本。

實施例後

aaa bbb ccc ddd 

： 需要一個書籤（無jQuery的），將使用正則表達式查找的文本的片段，然後用與該文本作爲

實施例之前的參數的鏈路替換它

aaa <a href="http:www.whatever.com?bbb">bbb</a> ccc ddd 

假設我們正在尋找 「BBB」

Answer 1

該解決方案將抓取DOM搜索文檔元素內的文本節點，跳過您想要的任何元素。例如，您可能要跳過<a>標記以及<腳本>標記和其他標記。這樣，您不會替換元素節點或基本頁面功能。

(function(){ 
    // don't replace text within these tags 
    var skipTags = { 'a': 1, 'style': 1, 'script': 1, 'iframe': 1 }; 

    // find text nodes to apply replFn to 
    var findKW = function (el, term, replFn) { 
     var child, tag; 

     for (var i = el.childNodes.length - 1; i >= 0; i--) { 
      child = el.childNodes[i]; 
      if (child.nodeType == 1) { // ELEMENT_NODE 
       tag = child.nodeName.toLowerCase(); 
       if (!(tag in skipTags)) { 
        findKW(child, term, replFn); 
       } 
      } else if (child.nodeType == 3) { // TEXT_NODE 
       replaceKW(child, term, replFn); 
      } 
     } 
    }; 

    // replace terms in text according to replFn 
    var replaceKW = function (text, term, replFn) { 
     var match, 
      matches = []; 

     while (match = term.exec(text.data)) { 
      matches.push(match); 
     } 
     for (var i = matches.length - 1; i >= 0; i--) { 
      match = matches[i]; 

      // cut out the text node to replace 
      text.splitText(match.index); 
      text.nextSibling.splitText(match[1].length); 
      text.parentNode.replaceChild(replFn(match[1]), text.nextSibling); 
     } 
    }; 

    var replTerm = prompt('Please enter term to replace'); 

    findKW(
     document.body, 

     // using \\b to only replace when the term is the whole word 
     // e.g. if term is "bbb" then "aabbbccc" will not match 
     new RegExp('\\b(' + replTerm + ')\\b', 'g'), 

     // your replacement function, change URL accordingly 
     function (match) { 
      var link = document.createElement('a'); 
      link.href = 'http://google.com/#q=' + match; 
      link.target = '_blank'; 
      link.innerHTML = match; 
      return link; 
     } 
    ); 
}());   

這在書籤的形式最小化：

javascript:(function(){var a={a:1,style:1,script:1,iframe:1};var b=function(d,e,f){var g,h;for(var i=d.childNodes.length-1;i>=0;i--){g=d.childNodes[i];if(g.nodeType==1){h=g.nodeName.toLowerCase();if(!(h in a)){b(g,e,f)}}else if(g.nodeType==3){c(g,e,f)}}};var c=function(a,b,c){var d,e=[];while(d=b.exec(a.data)){e.push(d)}for(var f=e.length-1;f>=0;f--){d=e[f];a.splitText(d.index);a.nextSibling.splitText(d[1].length);a.parentNode.replaceChild(c(d[1]),a.nextSibling)}};var d=prompt("Please enter term to replace");b(document.body,new RegExp("\\b("+d+")\\b","g"),function(a){var b=document.createElement("a");b.href="http://google.com/#q="+a;b.target="_blank";b.innerHTML=a;return b})})() 

複製成書籤，並嘗試一下任何網頁上！注意：搜索區分大小寫，但可以將「i」標誌添加到RegExp以防止出現這種情況。

Answer 2

最簡單的正則表達式：

document.body.innerHTML = document.body.innerHTML.replace(/bbb/ , '<a href="http://Google.com">bbb</a>'); 

更好：

document.body.innerHTML = document.body.innerHTML.replace(/(bbb)/ , '<a href="http://Google.com">$1</a>'); 

最佳：

var srch = "bbb"; 
var rg = new RegExp("("+srch+")"); 
document.body.innerHTML = document.body.innerHTML.replace(rg , '<a href="http://Google.com">$1</a>'); 

在正則表達式中的括號表示一個匹配組。第二個參數中的「$ 1」是第一個匹配的組。