用鏈接替換列表中每個單詞的第一個出現

Question

我發現了一個非常漂亮的小腳本，它幾乎可以完成我正在尋找的任務。它用維基百科的鏈接替換每個單詞列表的發生。問題是我只想要第一次發生聯繫。

這裏是腳本（從this answer）：

function replaceInElement(element, find, replace) { 
    // iterate over child nodes in reverse, as replacement may increase 
    // length of child node list. 
    for (var i= element.childNodes.length; i-->0;) { 
     var child= element.childNodes[i]; 
     if (child.nodeType==1) { // ELEMENT_NODE 
      var tag= child.nodeName.toLowerCase(); 
      if (tag!='style' && tag!='script') // special case, don't touch CDATA elements 
       replaceInElement(child, find, replace); 
     } else if (child.nodeType==3) { // TEXT_NODE 
      replaceInText(child, find, replace); 
     } 
    } 
} 
function replaceInText(text, find, replace) { 
    var match; 
    var matches= []; 
    while (match= find.exec(text.data)) 
     matches.push(match); 
    for (var i= matches.length; i-->0;) { 
     match= matches[i]; 
     text.splitText(match.index); 
     text.nextSibling.splitText(match[0].length); 
     text.parentNode.replaceChild(replace(match), text.nextSibling); 
    } 
} 

// keywords to match. This *must* be a 'g'lobal regexp or it'll fail bad 
var find= /\b(keyword|whatever)\b/gi; 

// replace matched strings with wiki links 
replaceInElement(document.body, find, function(match) { 
    var link= document.createElement('a'); 
    link.href= 'http://en.wikipedia.org/wiki/'+match[0]; 
    link.appendChild(document.createTextNode(match[0])); 
    return link; 
}); 

我一直在試圖修改（沒有成功）使用的indexOf insted的正則表達式（從this answer），我相信這將是比快正則表達式：

var words = ["keyword","whatever"]; 
var text = "Whatever, keywords are like so, whatever... Unrelated, I now know " + 
      "what it's like to be a tweenage girl. Go Edward."; 
var matches = []; // An empty array to store results in. 

//Text converted to lower case to allow case insensitive searchable. 
var lowerCaseText = text.toLowerCase(); 
for (var i=0;i<words.length;i++) { //Loop through the `words` array 
    //indexOf returns -1 if no match is found 
    if (lowerCaseText.indexOf(words[i]) != -1) 
     matches.push(words[i]); //Add to the `matches` array 
} 

所以我的問題是如何結合這兩個來獲得最高效/最快的結果，而不使用庫？

Answer 1

這裏修改你的代碼，做你想做http://jsfiddle.net/bW7LW/2/

function replaceInit(element, find, replace) { 

    var found = {}, 
     replaceInElement = function(element, find, replace, init) { 

      var child, tag, 
       len = element.childNodes.length, 
       i = 0, 
       replaceInText = function(text, find, replace) { 

        var len = find.length, 
         index, i = 0; 

        for (; i < len; i++) { 

         index = text.data.indexOf(find[i]); 

         if (index !== -1 && found && !found[find[i]]) { 

          found[find[i]] = true; 
          text.splitText(index); 
          text.nextSibling.splitText(find[i]); 
          text.parentNode.replaceChild(replace(find[i]), text.nextSibling); 
          return; 
         }; 
        }; 
       }; 

      // iterate over child nodes in reverse, as replacement may increase length of child node list. 
      for (; i < len; i++) { 

       child = element.childNodes[i]; 

       if (child.nodeType == 1) { // ELEMENT_NODE 
        tag = child.nodeName.toLowerCase(); 

        if (tag != 'style' && tag != 'script') { 
         replaceInElement(child, find, replace); 
        } 

       } else if (child.nodeType == 3) { // TEXT_NODE 
        replaceInText(child, find, replace); 
       } 
      } 
     }; 
    replaceInElement(element, find, replace); 
}; 

// keywords to match. This *must* be a 'g'lobal regexp or it'll fail bad 
var find = 'Lorem Ipsum bla'.split(' '); 

$(function() { 

    // replace matched strings with wiki links 
    replaceInit(document.body, find, function(str) { 
     var link = document.createElement('a'); 
     link.href = 'http://en.wikipedia.org/wiki/' + str; 
     link.appendChild(document.createTextNode(str)); 
     return link; 
    }); 
});​