Question

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

首先，如果用户输入带有某些链接的文本，检测到它们并将所有超链接转换为新标签中的链接。其次，如果用户想要添加更多文本和链接，他点击编辑并添加它们并保存，此时我必须忽略已经用锚点按钮链接的链接

请帮助和建议

例如：

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

这是一个正则表达式，您可以选择所有链接而无需锚点

(?:(?: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

<强> EDIT2：

这是一个短暂的用法小提琴

正则表达式

/((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这样的文字将被翻译到链接。

Answer 2

更简单的解决方案可能是剥离您创建的链接（这样用户就可以获得他们点击＆＃34;编辑＆＃34;再次输入的内容）。

另一个想法是将字符串拆分为</a>。这会给你一个字符串列表，这些字符串都以一个锚元素结尾（最后一个除外）。迭代此列表，在最后<a之后删除部分，链接。

如何在纯文本中检测带有锚元素的链接

2 个答案: