更換一次正文，一些HTML，通過一個I幀

Question

我需要做的

我顯示與HTML頁面的JavaScript的身體一個iframe什麼。 有了類似的東西document.write('<iframe ...></iframe'>);

在此iframe有我的JavaScript函數女巫搜索在父文件的正文中的關鍵字，並與父文檔中的HTML鏈接<a href="#">keyword</a>更換。

我已經試過

• Javascript Bookmarklet to replace text with a link：複雜的腳本，但我需要的skipTags
• 和Javascript .replace command replace page text?：很短的和漂亮的劇本，但不是skipTags功能...

當腳本處於文檔中但不在iframe中與父文檔一起工作時，這些工作就像一種魅力。

我的問題/問題

1. 的問題是，「關鍵字」被替換爲 「非解釋」的HTML文本。 （瀏覽器顯示<a href="#">keyword</a>）。
2. 我的第二個問題是如何做只替換一次，而不是爲 所有的匹配表達式？

Usualy我使用了一些jQuery，但在這個項目中，我只需要使用一些JavaScript沒有任何庫。

任何想法來幫助我？ （我不想讓任何人「寫我的代碼」，我只是想自己製作一些建議）

P.S. 1：我使用Chrome，但我想讓它在每個瀏覽器中都能正常工作。

P.S. 2：英語不是我的第一語言，所以如果你不明白的東西，不要猶豫，問我，我會盡力解釋它。

編輯2

第一個腳本現在用於HTML，所以問題1解決，但如何做只更換一次，即使關鍵字重複幾次？（問題2）

Answer 1

隨着xiaoyi的幫助下，我找到了一些解決方案：

• 停止循環並只替換第一個匹配
• 全球化職能，查找/替換多個關鍵字

我認爲它可以被優化，但對我來說它就像一種魅力，我會與你分享它，如果它可以幫助任何人（不要忘記更改文檔的目標，這裏「父」 ）：

(function(){ 
    // don't replace text within these tags 
    var skipTags = { 'a': 1, 'style': 1, 'script': 1, 'iframe': 1, 'meta':1, 'title':1, 'img':1, 'h':1 }; 
    // find text nodes to apply replFn to 
    function findKW(el, term, replFn) 
    { 
     var child, tag,found=false; 
     for (var i = 0;i<=el.childNodes.length - 1 && !found; 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 
       found=replaceKW(child, term, replFn); // if found=true, we stop the loop 
      } 
     } 
    }; 
    // replace terms in text according to replFn 
    function replaceKW(text, term, replFn) 
    { 
     var match, 
      matches = [],found=false; 
     while (match = term.exec(text.data)) 
     { 
      matches.push(match); 
     } 
     for (var i = 0;i<=matches.length - 1 && !found; 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); 
      if(matches[i])found=true;// To stop the loop    
     } 
     return found; 
    }; 
    // First search/replace 
    var replTerm = 'keyword'; 
    findKW(
     parent.document.body, 
     new RegExp('\\b(' + replTerm + ')\\b', 'gi'), 
     function (match) 
     { 
      var link = parent.document.createElement('a'); 
      link.href = 'http://www.okisurf.com/#q=' + replTerm; 
      link.target = '_blank'; 
      link.innerHTML = match; 
      return link; 
     } 
    ); 
    // A second search/replace 
    var replTerm = 'word'; 
    findKW(
     parent.document.body, 
     new RegExp('\\b(' + replTerm + ')\\b', 'gi'), 
     function (match) 
     { 
      var link = parent.document.createElement('a'); 
      link.href = 'http://www.okisurf.com/#q=' + replTerm; 
      link.target = '_blank'; 
      link.innerHTML = match; 
      return link; 
     } 
    ); 
    // Other search/replace 
    // ... 
}()); 

我還發現，第二個解決方案不與Internet Explorer巫工程不接受createTreeWalker() DOM功能