How to detect Links with out anchor element in a plain text

Question

If user enters his text in the text box and saves it and again what's to add some more text he can edit that text and save it if required.

Firstly if user enters that text with some links I, detected them and converted any hyperlinks to linkify in new tab. Secondly if user wants to add some more text and links he clicks on edit and add them and save it at this time I must ignore the links that already hyperlinked with anchor button

Please help and advice

For example:

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

I've tried this code

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

Please help Thanks.

@Dwza replace / match doesn't matter how can i ignore the links that already hyperlinked with anchor button — dhee, May 21 '14 at 04:34
Here is my another [question](http://stackoverflow.com/questions/24301080/autolink-url-in-contenteditable-iframe) and got answer — dhee, Jun 20 '14 at 06:29

score 3 · Answer 1 · edited May 17 '21 at 12:15

3

here is a regex where you select all the links without having anchors

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

Here is a RegExFiddle (updated 14:41)

quit a lil difficult task because in javascript you don't have a preceded by statement. :)

EDIT1: Now it detects...

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

EDIT2:

Here is it a little shorted and the usage fiddle

Regex

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

function

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

EDIT 1.000.000 :D

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

this solves your problem now.

the only problem you will run in here is, 4 letters after a dot is not selected. e.g .info if you want them selected than change {2,3} to {2,4} BUT be carefully... if someone adds a text like my name is.john than is.john will be translated to a link.

EDIT 2.0

If you have a really complex URL like the following

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

Matches

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

edited May 17 '21 at 12:15

Channaveer Hakari

2,769
3
34
45

answered May 20 '14 at 12:20

Dwza

6,494
6
41
73

1

did you test the given regx ? – dhee May 22 '14 at 11:14
@dhee sorry, im at work :) updated the regex, now it also detects www. – Dwza May 22 '14 at 12:21
@dhee would be nice if you accept the answere if this solved your problem :) – Dwza May 23 '14 at 00:26
i'm still facing some issues with this regx :( – dhee May 23 '14 at 03:32
Dwza test with this url it fails :( https://static.doubleclick.net/viewad/4327673/1-728x90.jpg im poor in regx formation or creation can you please help – dhee May 23 '14 at 03:35
@dhee done :D if you want some more changes, you have to invite me at least for a coke ;D – Dwza May 23 '14 at 08:29
@dhee i already did. dont you saw my changes ? see my edit 1.000.000 :D – Dwza May 24 '14 at 05:36
Waw this works fine in [RegExr](http://regexr.com/) if this works in my site i'll accept the answere and thank you so much – dhee May 26 '14 at 13:13
Ur EDIT 1.000.000 expression ignoring the urls in any html tags. like span. How can u ignore only urls in . – mmssaann May 27 '14 at 07:47
@mmssaann first it doesn't ignores all html tags, its just lil buggy on other tags selecting the `.com` or `.de` or what ever... i fixed it by replacing `[\/a-z<\/a>]` with `.*a>`, post updated. `www.abc.xy` would make no sense anyway... or what is your tag you using ? `www.abc.xy`is no problem. – Dwza May 27 '14 at 08:09
@Dwza i realized that i can't solve my problem using regex :( i'm getting new bugs while trying in this method. Thanks for your help :) – dhee May 27 '14 at 09:18

score 2 · Answer 2 · answered May 20 '14 at 12:15

A more simple solution is probably to strip the links which you created (so the user gets exactly what they typed when they click "Edit" again).

Another idea is to split the string at </a>. That gives you a list of strings which all end with an anchor element (except the last one). Iterate over this list, cut away the part after the last <a, linkify.

How to detect Links with out anchor element in a plain text

2 Answers2

Linked