Javascript-如何在不干擾頁面HTML的情況下向頁面中的單詞添加鏈接

Question

我正在制作一個搜索特定單詞的工具，當它找到它們時，將它們包裝在<span>標記中並向它們添加鏈接。 我以為一開始這很簡單，但是很快就意識到它並不是那么簡單，因為它有很多不同的方式可以弄亂頁面中的HTML元素。

注意：在此示例中，它正在尋找類似rs25283代碼，但是此腳本還需要尋找將在數組中提供的預定義單詞。

我從一個非常簡單的東西開始：

var pattern = new RegExp("(rs[0-9]+)","ig");
output = $('body').html().replace(pattern, function replacer(contents,word) {
    return '<span>' + word + ' <a href="https://mylink.com/item/'+ word +'"></a>  </span>'; 
});

當然哪個失敗了，因為它替換了HTML元素和屬性中的單詞並創建了一個完整的混亂。 像這樣在模式中添加空格：

var pattern = new RegExp("([ ]rs[0-9]+[ ])","ig");

將減少錯放的次數，但仍然無法正常工作，因為例如，可能會有這樣的HTML <img src="whatever.jpg" alt="Some info about rs25162 in here.">

因此腳本將破壞該img標簽。

因此，我嘗試了一種更加進化的方法，將整個頁面分成如下部分：

var words = $('body').html().split(' ');

然后遍歷每個部分，看看是否可以找到匹配項。 為了找到匹配項，我將要查找的單詞有一個關聯數組，因此當遍歷頁面上的每個單詞時，我會檢查它是否存在於數組中。

像這樣：

var search_words = [
  'rs14235',
  'rs6262',
  'COMT',
  'ACE'
];

for (i=0;i<words.length;i++) {
  if (search_words.indexOf(word[i]) > -1) { // do something }
}

現在問題仍然存在，它將破壞標簽，但是現在我可以做的是檢查何時使用“”打開屬性，因此我將知道單詞是否在HTML標簽屬性內。標簽本身有點棘手。例如，如果出現<h1>Title with word in it</h1> ，則我不想替換該單詞。我無法過濾掉HTML標記中出現的任何內容，因為需要替換的單詞可能位於<p> ， <div> ， <span>和其他標簽內。

因此，這里最好的解決方案是創建一個列入黑名單的HTML標簽列表嗎？ 我假設成千上萬的程序員已經面對了這種確切的情況，所以我不想在這里重新發明輪子，如果有人可以向我展示實現此目標的最佳方法，將不勝感激。

編輯：我發現這篇文章描述了此問題： http : //james.padolsey.com/javascript/replacing-text-in-the-dom-its-not-that-simple/

Answer 1

例如，您可以嘗試使用.not（）選擇器

$pattern = new RegExp("(rs[0-9]+)","ig");
$blacklist= $("Choose any tag class or id, p,div,a,span,nav,ul,li").not($pattern );