Add option to truncate long URLs

[euangoddard]

It would be helpful to be able to pass an option to limit the number characters of the output link text inside the element to prevent overflow issue when people paste very long link.

If this is not possible, a post-linkification hook would be useful so that a 3rd party could perform such an action.

[nfrasser]

Both truncate and the hook are good features to have. Might be tricky to add to the current implementation. I'll see if I can get around it by the end of this week.

[euangoddard]

I took a look at the source and I guess you'd need a step after the first regex replace with since it would be impossible to do it in a single step.

My other thought was to re-check all links which had the class that the linkify plugin sets, but I thought this might be quite inefficient.

[nfrasser]

What's good about the current implementation is that it does it all in one go. To extract the individual URLs, the string might have to be split up and have some sort of lexical analysis performed on it.

And yeah, rechecking all the links would not be ideal but it would probably be the quickest solution.

[brennanmceachran]

Possible also to add a class on the link and set the width and ellipsis in css:
http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

[nfrasser]

Or we could potentially build <a> tags in terms of DOM fragments rather than a string of HTML.

[euangoddard]

I looked into a CSS approach, but this is unreliable cross-browser, hence the idea to alter the text node in the DOM.

[nfrasser]

Fixed in #51, with the format option.

Example:

$('p').linkify({
  format: function (value, type) { 
    // value is the link, type is 'url', 'email', etc.
    if (type === 'url' && value.length > 50) { 
      value = value.slice(0, 50) + '…'; 
    } 
    return value; 
  }
});

[simonferndriger]

Thank you very much!

[simonferndriger]

Not, I get the following error message Error: Cannot linkify [object Text] - Invalid DOM Node type

It worked before with version 1.1.6

[nfrasser]

What selector are you passing in?

[deathg0d]

+1 for this feature
(Also to make links shorter and visually appealing, is there a way to hide http://, https:// and www etc?)

[nfrasser]

@deathg0d dedicated protocol and www. removal (though I wouldn't recommend removing www.) sounds like a pretty good idea. For now you can use the format option:

$('p').linkify({
  format: function (value, type) {
    if (type === 'url') {
      value = value.replace(/^((http|ftp)s?:\/\/|:\/\/)?(www\.)?/, '');
    }
    return value;
  }
});

Which is available in the latest pre-release.

[nfrasser]

Closing this off as I have not been able to reproduce @simonferndriger 's error. A separate issue can be filed if the error reoccurs.