Javascript 创建动态链接但忽略现有链接

Question

我用它在网页中动态创建链接:

var linkWord = function(obj){
  for(i in obj){  
    var x = document.body.innerHTML;   

    var linkStart = '<a href="'+obj[i]+'">';
    var linkEnd = '</a>';
    var reg = new RegExp("\\b(" + i + ")\\b","ig"); 
    x = x.replace(reg, linkStart + i + linkEnd);
    document.body.innerHTML = x;

  }
  console.log(obj);
}

linkWord({
  'The':'http://www.example.com',
  'Vokalia':'http://icant.co.uk',
  'Brent':'http://google.com', 
});

这会在页面中创建与关键字匹配的链接，但如果它也匹配，则会覆盖现有的 href。我该如何改进它以忽略现有链接？

请不要使用 jQuery。

https://jsfiddle.net/o43Lxmtr/

Answer 1

您可以通过将否定集附加到正则表达式来修复它，以丢弃以 > 为前缀的单词并以 < 为后缀.

编辑:更好的方法可能是构建一个负前瞻，以禁止标签内包含文本。

再次编辑:如果负前瞻只对 anchor 标签有效，那就更好了:

var linkWord = function(obj){
  for(i in obj){  
    var x = document.body.innerHTML;   

    var linkStart = '<a href="'+obj[i]+'">';
    var linkEnd = '</a>';
    var reg = new RegExp("\\b(" + i + ")\\b(?![^<]*>|[^<>]*<\/[a])","ig"); 
    x = x.replace(reg, " " + linkStart + i + linkEnd + " ");
    document.body.innerHTML = x;
    console.log(document.body.innerHTML);
  }
  console.log(obj);
}

linkWord({
  'The':'http://www.example.com',
  'Vokalia':'http://icant.co.uk',
  'behind':'http://google.com', 
});

请注意，在替换字符串前后也添加了空格，因为正则表达式会去除它们。

编辑:工作演示 here .

Edit2:第二个解决方案的工作演示 here .

Edit3:第三个解决方案的工作演示 here .