How to replace and shorten hyperlinks in a paragraph of text with JavaScript/jQuery?

Question

Say I have a paragraph of text:

The Northrop Grumman X-47B https://en.wikipedia.org/wiki/Northrop_Grumman_X-47B 
is a demonstration unmanned combat air vehicle (UCAV) designed for carrier-based 
operations.

I want to replace the hyperlink within the text and turn it into a real hyperlink. At the same time I want to shorten the wording of the hyperlink to a fixed 20 characters so the text the user would read is shorter e.g.

The Northrop Grumman X-47B https://en.wikipedia.org... is a demonstration unmanned combat air vehicle (UCAV) designed for carrier-based operations.

So the code of the link within the text might look like this:

<a href="https://en.wikipedia.org/wiki/Northrop_Grumman_X-47B">https://en.wikipedia.org...</a>

I have had a look around and found a few examples but they don't work at all. I would like just a standard JavaScript function to do it. That is, a function which takes in plaintext (not HTML) and can convert the text. Not sure how you would protect against XSS at the same time.

I have a suspicion it will involve a combination of looping through each part of the text, then some regex to find the URL, extract it, then shorten the URL with substr() then replace it into the text somehow. Any idea how to do it?

Thanks for the help.

adeneo · Answer 1 · 2013-09-20T12:30:47.650

1

Something like this:

$('p').html(function(_,txt) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return txt.replace(exp, function(l) {
        return '<a href="'+l+'">'+l.substr(0,20)+'...</a>'
    }); 
});

FIDDLE

edited Sep 20 '13 at 12:30

answered Sep 20 '13 at 12:14

adeneo

312,895
29
395
388

This is nice. What about instead of using the `p` selector, [finding all instances of text nodes](http://stackoverflow.com/questions/2836317/using-jquery-to-gather-all-text-nodes-from-a-wrapped-set-separated-by-spaces)? That would be a very nice solution – CodingIntrigue Sep 20 '13 at 12:15
Thanks adeneo that works! Can you explain what the regular expression part is doing exactly? How does it protect against XSS? It it whitelisting only allowed characters? – David J Sep 21 '13 at 01:37
@DavidJ - The regular expression matches any valid URL so as to wrap URL's in anchors. XSS is to insert scripts that will affect other users, just inserting HTML into the DOM isn't an issue at all, and is done by just about every website on the web. – adeneo Sep 21 '13 at 01:56

score 0 · Answer 2 · edited May 23 '17 at 12:05

I edited the approved answer to return what you need. This will replace the link text regardless of the link (ie, it's not a link to wikipedia).

function replaceURLWithHTMLLinks(text) {
  var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  return text.replace(exp, function ($1) {
    return '<a href="' + $1 + '">' + $1.slice(0, 20) + '...</a>';
  });
}

Fiddle

score 0 · Accepted Answer · answered Sep 20 '13 at 12:21

Use this script

<script>
function convertlink(text) {
    var urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, function(url) {
        return '<a href="' + url + '">' + geturl(url) + '</a>';
    })

}

function geturl(url){
    if(url.length > 20){
     return url.substr(0,20) + "...";
    } else { 
     return url;
    }
}

var str = "The Northrop Grumman X-47B https://en.wikipedia.org/wiki/Northrop_Grumman_X-47B is a demonstration unmanned combat air vehicle (UCAV) designed for carrier-based operations."

alert(convertlink(str));
</script>

How to replace and shorten hyperlinks in a paragraph of text with JavaScript/jQuery?

3 Answers3