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

Question

Im using this to dynamically make links in a webpage: 我使用它来动态地在网页中创建链接：

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', 
});

This creates links in the page that matches the keyword, but overwrites existing hrefs if it also matches. 这将在页面中创建与关键字匹配的链接，但如果匹配则覆盖现有的href。 How can I improve this to ignore the existing links? 如何改进此以忽略现有链接？

No jQuery please. 请不要jQuery。

https://jsfiddle.net/o43Lxmtr/ https://jsfiddle.net/o43Lxmtr/

Answer 1

You can fix it by appending negated sets to the reg expression in order to discard words that are prefixed by > and suffixed by < . 您可以通过将否定集附加到reg表达式来修复它，以便丢弃以>为前缀并以<后缀的单词。

Edit: A better approach might be to build a negative lookahead in order to disallow text contained inside tags. 编辑：更好的方法可能是建立一个负向前瞻 ，以便禁止包含在标签内的文本。

Edit again: it is even better if the negative lookahead only works for anchor tags: 再次编辑：如果负向前瞻仅适用于锚标记，则更好：

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', 
});

Note that spaces were also added before and after the replaced string since the regex would strip them. 请注意，在替换字符串之前和之后也添加了空格，因为正则表达式会剥离它们。

Edit: working demo here . 编辑：在这里工作演示。

Edit2: working demo for second solution here . Edit2：这里的第二个解决方案的工作演示。

Edit3: working demo for third solution here . Edit3：这里的第三个解决方案的工作演示。

Answer 2

It looks like this question was answered before I could come up with a solution, and its also much cleaner than my solution. 看起来这个问题在我提出解决方案之前得到了解答，而且它比我的解决方案更清晰。 Good Job 做得好

It would seem, after testing your code under various circumstances, that the best way to accomplish this is to remove your links from the layout before running your function, and add them again once it is completed. 在各种情况下测试代码后，似乎最好的方法是在运行函数之前从布局中删除链接，并在完成后再次添加它们。

Keep in mind we are only removing the inner contents of those tags, so it will be necessary to store these in order so that they will be added again in the correct places. 请记住，我们只删除这些标记的内部内容，因此有必要按顺序存储这些内容，以便将它们再次添加到正确的位置。

JAVASCRIPT JAVASCRIPT

var links_array = {};
var links = document.getElementsByTagName('a');

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


    var linkStart = '<a class=added 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;

  }

}
function getPrevLinks(){


for(link in links){
    if(typeof links[link] === 'object'){
    if(! links[link].hasAttribute('class')){

    links_array[links[link].innerHTML] = links[link].href;
    links[link].innerHTML = '';
    }
    }
}

return links_array;
}

function returnLinks(links, links_array){
console.log(links);
console.log(links_array);
for(link in links){
    if (links[link].innerHTML === ""){
        for(prop in links_array){
            if(links[link].innerHTML === ""){
                links[link].innerHTML = prop;
                delete links_array[prop];
            }
        }

    }
}
        }


getPrevLinks();

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

HTML HTML

<body>
    <p id=me>The Vokalia Brent some more stuff and 
<a href = "http://www.bing.com">The Vokalia Brent 1</a>
<a href = "http://www.bing.com">The Vokalia Brent 2</a>
<a href = "http://www.bing.com">The Vokalia Brent 3</a>
<p>some paragraph</p></p>
<script src="java.js"></script> 
</body>

If you need a detailed explanation just leave me a comment. 如果您需要详细解释，请给我留言。

And the fiddle 而小提琴

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-10-03 00:08:24

解决方案2
1 2015-10-03 01:46:30

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-10-03 00:08:24

解决方案2 1 2015-10-03 01:46:30

解决方案1
2 已采纳 2015-10-03 00:08:24

解决方案2
1 2015-10-03 01:46:30