javascript - 如何检测纯文本中没有 anchor 元素的链接

Question

如果用户在文本框中输入他的文本并保存，然后再次添加更多文本，他可以编辑该文本并在需要时保存。

首先，如果用户输入带有某些链接的文本，我会检测到它们并将任何超链接转换为在新选项卡中进行链接。其次，如果用户想添加更多文本和链接，他点击编辑并添加它们并在此时保存，我必须忽略已经用 anchor 按钮超链接的链接

请帮忙指点

例如:

what = "<span>In the task system, is there a way to automatically have any site / page URL or image URL be hyperlinked in a new window?</span><br><br><span>So If I type or copy http://www.stackoverflow.com/&nbsp; for example anywhere in the description, in any of the internal messages or messages to clients, it automatically is a hyperlink in a new window.</span><br><a href="http://www.stackoverflow.com/">http://www.stackoverflow.com/</a><br>    <br><span>Or if I input an image URL anywhere in support description, internal messages or messages to cleints, it automatically is a hyperlink in a new window:</span><br> <span>https://static.doubleclick.net/viewad/4327673/1-728x90.jpg</span><br><br><a href="https://static.doubleclick.net/viewad/4327673/1-728x90.jpg">https://static.doubleclick.net/viewad/4327673/1-728x90.jpg</a><br><br><br><span>This would save us a lot time in task building, reviewing and creating messages.</span>



Test URL's
        http://www.stackoverflow.com/
        http://stackoverflow.com/
        https://stackoverflow.com/
        www.stackoverflow.com
        //stackoverflow.com/
        <a href='http://stackoverflow.com/'>http://stackoverflow.com/</a>";

我试过这段代码

function Linkify(what) {
    str = what; out = ""; url = ""; i = 0;
    do {
        url = str.match(/((https?:\/\/)?([a-z\-]+\.)*[\-\w]+(\.[a-z]{2,4})+(\/[\w\_\-\?\=\&\.]*)*(?![a-z]))/i);
        if(url!=null) {
            // get href value
            href = url[0];
            if(href.substr(0,7)!="http://") href = "http://"+href;

            // where the match occured
            where = str.indexOf(url[0]);

            // add it to the output
            out += str.substr(0,where);

            // link it
            out += '<a href="'+href+'" target="_blank">'+url[0]+'</a>';

            // prepare str for next round
            str = str.substr((where+url[0].length));
        } else {
            out += str;
            str = "";
        }
    } while(str.length>0);
    return out;
}

请帮忙 谢谢。

Answer 1

这是一个正则表达式，您可以在其中选择所有没有 anchor 的链接

(?:(?:http(?:s)?(?:\:\/\/))?(?:www\.)?(?:\w)*(?:\.[a-zA-Z]{2,4}\/?))(?!([\/a-z<\/a>])|(\'|\"))

这是一个 RegExFiddle (14:41 更新)

放弃一个小小的困难任务，因为在 javascript 中你没有 preceded by 语句。 :)

EDIT1:现在它检测...

http://www.abc.xy
http://abc.xy
https://www.abc.xy
https://abc.xy
www.abc.xy
abc.xy

编辑 2:

这里有点短，使用 fiddle

正则表达式

/((http(s)?(\:\/\/))?(www\.)?(\w)*(\.[a-zA-Z]{2,4}\/?))(?!([\/a-z<\/a>])|(\'|\"))/g

函数

function Linkify(str) {
    var newStr =  str.replace(/((http(s)?(\:\/\/))?(www\.)?(\w)*(\.[a-zA-Z]{2,4}\/?))(?!([\/a-z<\/a>])|(\'|\"))/g,'<a href="$1">$1</a>');
    return newStr;
}

var newData = Linkify(data);

WORKING JS-FIDDLE

编辑 1.000.000 :D

/((http(s)?(\:\/\/))?(www\.)?([\w\-\.\/])*(\.[a-zA-Z]{2,3}\/?))(?!(.*a>)|(\'|\"))/g

这现在解决了您的问题。

您将在此处遇到的唯一问题是，未选中点后的 4 个字母。例如 .info 如果你想选择它们而不是将 {2,3} 更改为 {2,4} 但要小心......如果有人添加像 my name is.john 这样的文本，然后 is.john 将被翻译成一个链接。

编辑 2.0

如果您有一个非常复杂的 URL，如下所示

((http(s)?(\:\/\/))?(www\.)?([\a-zA-Z0-9-_\.\/])*(\.[a-zA-Z]{2,3}\/?))([\a-zA-Z0-9-_\/?=&#])*(?!(.*a>)|(\'|\"))

匹配

https://stackoverflow.com/questions/34170950/summernote-inserthtml?firstname=channaveer&lastname=hakari#fsdfsdf