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

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

编辑：更好的方法可能是建立否定前瞻，以禁止标记中包含的文字。

再次编辑：如果否定前瞻仅适用于锚标记，那就更好了：

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的工作演示。

Answer 2

看起来这个问题在我提出解决方案之前得到了回答，而且它比我的解决方案更清晰。干得好

在各种情况下测试您的代码后，   最好的方法是从中删除你的链接   运行函数前的布局，一旦添加就再次添加   完成。

请记住，我们只删除了那些内容   标签，因此有必要按顺序存储这些标签，以便将它们再次添加到正确的位置。

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

<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>

如果您需要详细说明，请留言。

fiddle

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

2 个答案: