只替換網頁上的文本以創建鏈接

我想修改日期形式的文檔中的文本，並將其替換爲鏈接以將該日期的活動添加到Google日曆。我主要有這個工作，一個警告，它試圖添加已有鏈接，其中有日期的鏈接。只替換網頁上的文本以創建鏈接

document.body.innerHTML = document.body.innerHTML.replace(arrayDates[i], arrayDates[i] + " <a href=\"http://www.google.com/calendar/event?action=TEMPLATE&text=someevent&dates=" + dateString + "&details=&location=&trp=false&sprop=&sprop= target=\"_blank\"> <img src=\"" + chrome.extension.getURL("Config-date-16.png") + "\" title=\"Add this event to your Google Calendar\"> </a> ");

我以爲只是運行在所有p標籤元素的innerHTML字符串替換：如

arrayP = document.body.getElementsByTagName("p"); 
for(i=0;i<arrayP.length:i++) { 
    arrayP[i].innerHTML = arrayP[i].innerHTML.replace(arrayDates[i], arrayDates[i] + " <a href=\"http://www.google.com/calendar/event?action=TEMPLATE&text=someevent&dates=" + dateString + "&details=&location=&trp=false&sprop=&sprop= target=\"_blank\"> <img src=\"" + chrome.extension.getURL("Config-date-16.png") + "\" title=\"Add this event to your Google Calendar\"> </a> "); 
}

而且這也包括兒童（如鏈接標籤）。我不確定如何在沒有孩子的情況下只替換p標籤元素的innerHTML。

除了刪除帶有標籤的所有元素（它也會破壞圖像等，所以我應該對這些元素也做同樣的事情），運行替換，並重新插入標籤元素，我想不出另一種方式已經存在的鏈接問題（想法歡迎）。

不幸的是我也遇到了這個問題。我可以使用正則表達式來匹配innerHTML字符串中的所有元素，但是我認爲使用DOM會更簡單。

我嘗試了以下，但我不知道如何解決不知道哪個孩子tobeReplacedNodes [i]屬於的問題：（編輯：我大概可以調用.parent或somesuch來弄清楚它是什麼父母是...我會再次嘗試了這一點，並報告是怎麼回事）

tobeReplacedNodes = document.body.getElementsByTagName("a"); 
for(i=0;i<tobeReplacedNodes.length;i++) { 
    tobeReplacedNodes[i] = document.body.replaceChild(element, tobeReplacedNodes[i]); 
}

我至今在這裏：http://code.google.com/p/calendar-event-adder/（測試分支是最電流）

任何想法/感謝您的建議，謝謝！

來源

2010-10-16 Thomas Wolfe

遞歸地走DOM，跳過鏈接（及其子節點），並僅處理nodeType爲"text"的節點。您應該在包含文本的所有內容中包含Text節點，其中包括<p>。

來源

2010-10-16 10:10:29

而不是對整個文檔做一個RegExp，我會嘗試使用DOM。

使用jQuery，我首先只選擇我想替換文本節點的節點。這很重要，否則你也會替換你真正想要避免的標籤中的內容，例如<code>或事件<script>。在那些獲得文本節點並提取匹配。我的例子在選擇要考慮掃描的元素YMMV方面非常保守。

// I used this code to execute on your stackoverflow question, 
// thus I choose "this" . Try it in Firebug. 
var re = /(this)/gi, split; 
$('div,p').contents().each(function() { 
    if (this.nodeType == Node.TEXT_NODE) { 
     if (this.nodeValue.match(re)) { 
      split = this.nodeValue.split(re); 
      for (var i = 0, l = split.length; i < l; i++) { 
       if (i % 2) { 
        // the re catches the match thus every 
        // odd index is the match 
        $('<a href="#destination">' + split[i] + 
         '</a>').insertBefore(this); 
       } else { 
        $(document.createTextNode(split[i])). 
         insertBefore(this); 
       } 
      } 
      $(this).remove(); 
     } 
    } 
});

據我所知使用Node.TEXT_NODE是不是跨瀏覽器兼容，使用原生值3如果它不是可用可能是必要的。我也讀過String＃split也許不適用於任何地方。換句話說：需要仔細測試。

來源

2010-10-16 10:46:15 mark

謝謝。我使用了你的解決方案和Edgars解決方案的一部分，並提出了一個（不是100％完成的，我需要匹配文本節點中的文本，然後創建一個鏈接元素並將其附加爲文本節點子節點，從而擺脫不正確的data.replace）可能效率較低的解決方案。總之，這裏是我有什麼（我通過在body元素）到目前爲止，我一次，我完成後再次：（不全部裝入此評論）pastebin.com/RmHk3sKk 我會投你，埃德加了，但我還沒有足夠的聲望，我不確定誰選擇作爲接受的解決方案，因爲這兩個都是ri – 2010-10-18 10:16:23

@Thomas：你的pastie代碼有可能通過非web -text節點，因爲你用'hasChildNodes'其中*可能*找到''

相關問題

只替換網頁上的文本以創建鏈接

回答

相關問題