jQuery tende a farci perdere la capacità di risolvere dei problemi comuni a causa della sua peculiare caratteristica di semplificare gran parte del lavoro sui documenti web. Un tipico esempio
è quello della trasformazione di stringhe come @gabromanato
in link al corrispondente profilo su Twitter.
La soluzione fa uso delle espressioni regolari combinate con il metodo replace()
e la proprietà innerHTML
:
(function() {
var autoTwitterUsername = function( element ) {
var html = element.innerHTML;
element.innerHTML = html.replace( /([^a-z0-9-_&])@([0-9a-z_]+)/gi, "$1<a href=\"http://twitter.com/$2\" target=\"_blank\" rel=\"nofollow\">@$2</a>" );
};
document.addEventListener( "DOMContentLoaded", function() {
var p = document.querySelectorAll( "p" );
for( var i = 0; i < p.length; ++i ) {
var para = p[i];
autoTwitterUsername( para );
}
});
})();
Potete visionare l'esempio di seguito.
See the Pen JavaScript: automatic Twitter links for usernames by Gabriele Romanato (@gabrieleromanato) on CodePen.