javascript regex fix for not replacing image url

Question

I am using regex to replace all url in string to <a href="url">url</a>.

For that I am using

if(!String.linkify) {
    String.prototype.linkify = function() {

        // http://, https://, ftp://
        var urlPattern = /\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim;

        // www. sans http:// or https://
        var pseudoUrlPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim;

        // Email addresses
        var emailAddressPattern = /[\w.]+@[a-zA-Z_-]+?(?:\.[a-zA-Z]{2,6})+/gim;

        return this
            .replace(urlPattern, '<a href="$&">$&</a>')
            .replace(pseudoUrlPattern, '$1<a href="http://$2">$2</a>')
            .replace(emailAddressPattern, '<a href="mailto:$&">$&</a>');
    };
}

and

mystr.linkify();

it's from here , https://stackoverflow.com/a/7123542/1602333

it works good unless I have img tag in my string , it replaces

<img src="imgurl"/> to <img src="<a href="imgurl">imgurl</a>"

Which change should I do to my regex to not replace urls which are part of some tag attribute ?

Any help would be great.

Rule 1: don't use RegEx to parse HTML. Rule 2: if you still want to parse HTML with RegEx, see rule 1. — freefaller, Sep 15 '15 at 10:59
Have you tried the library mentioned in the first answer in the question you link to? — nhahtdh, Sep 15 '15 at 11:02
not actually, are you talking about http://benalman.com/projects/javascript-linkify/ ? — MohK, Sep 15 '15 at 11:07
[Autolinker.js](https://github.com/gregjacobs/Autolinker.js). And the usage is simple: `var linkedText = Autolinker.link(input_html, { className: "myLink" } );`. — Wiktor Stribiżew, Sep 15 '15 at 11:07
@MohammadhussainKhatri - stop jumping to conclusions, I didn't downvote — freefaller, Sep 15 '15 at 11:10
@stribizhev I didn't use that library. will try. Are you sure , it will not replace url in img tag ? — MohK, Sep 15 '15 at 11:15
I have posted the answer with the description from the library readme. — Wiktor Stribiżew, Sep 15 '15 at 11:19

score 1 · Accepted Answer · answered Sep 15 '15 at 11:18

1

Use Autolinker.js, it is known to be reliable with linkifying.

See the description part about links inside other tags/attributes:

Will properly handle HTML input. The utility will not change the href attribute inside anchor (<a>) tags (or any other tag/attribute for that matter), and will not accidentally wrap the inner text of an anchor tag with a new one (which would cause doubly-nested anchor tags).

Here is an example of using it:

var linkedText = Autolinker.link(input_html, { className: "myLink" } );

answered Sep 15 '15 at 11:18

Wiktor Stribiżew

607,720
39
448
563

ok , trying , just a few minutes. – MohK Sep 15 '15 at 11:20
1

yes, it's working as expected. I couldn't find it even I refered to that question. Thank you. – MohK Sep 15 '15 at 11:41

javascript regex fix for not replacing image url

1 Answers1

Linked