使用正则表达式和 javascript 使链接可点击但不覆盖预先存在的链接？

Question

我需要使用 javascript 使链接可点击，我认为正则表达式将是最简单的，更不用说最快的方法了。我希望所有链接都是可点击的，并且不重写已经存在的可点击链接。

Example: 
Here is a link to visit http://www.example.com/page Please take a look <a href="http://www.example.com/page">here</a>.

Becomes: Here is a link to visit <a href="http://www.example.com/page">http://www.example.com/page</a> Please take a look <a href="http://www.example.com/page">here</a>.

Another example: Here is a link to visit http://www.example.com/page Please take a look here: <a href="http://www.example.com/page">http://www.example.com/page</a>

Becomes: Here is a link to visit <a href="http://www.example.com/page">http://www.example.com/page</a> Please take a look here: <a href="http://www.example.com/page">http://www.example.com/page</a>

And finally: <p id="demo">http://example.com/
<br><a href="http://example.com/123">http://example.com/123</a>
<br><a href="http://Google.ca/">http://Google.ca/</a></p>

Answer 1

var text = [
        "http://www.example.com/page address at the begining then a well formated a tag take a look <a href='http://www.example.com/page'>here</a>.",
        " text in front http://www.example.com/page Please take a look <a href='http://www.example.com/page'>here</a>.",
        "  http less with get vars www.example.com/page?foo=bar Please take a look  <a href='http://www.example.com/page'>here</a>.",
        '<p>http://example.com/<br /><a href="http://example.com/123">http://example.com/123</a><br /><a href="http://Google.ca/">http://Google.ca/</a></p>'
    ] ,
    reg = /([\s>]|^)((?:http:\/\/)?(?:[a-z][\w-]+)+(?:\.[\w-]+)*(?:\.[a-z]{2,3})(?:[^ <]+))(?=[\s<]|$)/g,
    output = '';
    for(var key in text){
        $('body').append(
        '<div>'+
          text[key]
                .replace(reg, '$1<a href="$2">$2</a>')
                .replace(/(href=['"])(?!http:\/\/)/g, '$1http://')+
        '</pre>'
        );
    }

可以在浏览器/Firebug 控制台中测试。

应进行更多测试以找到最受信任的极端分隔符/标记

Answer 2

这应该可以解决问题：

var pattern = new RegExp("[^\"'](http://[^ ]*)","g");
var newContent = yourString.replace(pattern," <a href=\"$1\">$1</a>");

注意评论：

var pattern = new RegExp("([^\"'])(http://[^ ]*)","g");
var newContent = yourString.replace(pattern,"$1<a href=\"$2\">$2</a>");

评论后再次编辑，上一个假设链接不在开头：

var pattern = new RegExp("([^\"']||^)(http://[^ ]*)","g");
var newContent = yourString.replace(pattern,"$1<a href=\"$2\">$2</a>");

你可能已经看过这个模式了，在正则表达式中 () 里面的东西被分配给一个返回参数 $1 和 $2 在这种情况下，在替换语句中使用了witch来重建字符串。这里的模式必须当您遇到模式未捕获的其他异常时，可能会进一步扩展，例如将链接放在 () 中不会给出所需的结果。一个使用正则表达式的好网站是regextester.com