[SOLUCIONADO] Añadir estilos y url a una palabra cuando se nombra a un user con @ como en Twitter

[Adbane]

Me gustaría saber algún modo de añadirle estilos y enlaces a una palabra suelta dentro de un texto, cuando en esta se escribe al principio "@", como en Twitter. Algo en plan, el usuario escribe esto:
"Lorem ipsum @usuario ad his scripta blandit partiendo"
Y se ve así:
"Lorem ipsum @usuario ad his scripta blandit partiendo"
En código, algo así:

Código HTML:

<p>Lorem ipsum <a href="http://@usuario" class="user">@usuario</a> ad his scripta blandit partiendo</p> 

(El class, para añadirle sus correspondientes estilos)


¿Alguna idea, mediante Javascript, o jQuery?

¡Gracias de antemano! :D

[rosonator]

Aquí hay dos cosas que debes hacer: Primero, separar el texto en palabras y segundo identificar las palabras que empiecen por @. Esto es:

tuTexto = tuTexto.replace(/\n/g,' ');
var palabras =tuTexto.split(" ");

Primero conviertes nuevas lineas y returns en espacios y luego haces un split() por espacios.

Una vez hecho esto, es el turno de comparar cada palabra con expresiones regulares, que supongo conocerás, y si no, écha un ojo en este lugar:

http://fgualambo.blogspot.com.es/2011/09/expresiones-regulares-javascript.html

Espero haberte sido de ayuda,

Alex

[furoya]

A mí también me parece que lo mejor es usar replace() con expresiones regulares. Pero quizá vas a tener que buscar cualquier cadena que empiece con " @" (espacio y arroba) y que termine en el siguiente espacio. Sería para diferenciar de las direcciones de correo electrónico, que antes de la arroba tienen un caracter distinto de espacio.

Después le hacés el reemplazo por la etiqueta (con una clase para darle formato) el href y el mismo texto encontrado, y el cierre de etiqueta, por supuesto.

Si no sabés sobre regular expression puede ser complicado, porque quizá tengas que aprender bastante (un dato importante es el uso de $1). Alguien lo debe haber hecho ya, vamos a esperar que aparezca aunque sea con un cut and paste. O que lo desarrolle como un ejercicio.

[Adbane]

Gracias a los dos! Me ha servido de ayuda, y funciona con expresiones, e incluso me asegurado de que no afecte a correos eléctronicos. Cómo imagino que cualquier otra persona que busque en Google o el foro la misma solución, llegará aqui, dejo el código para el que le interese:

Código Javascript:

$('.comment p').each(function(){
    var str = $(this).text();
    $(this).empty();
 
    str = ' '+str;
    str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1<a href="http://misitio.com/usuarios/$2" class="user">@$2</a>');
 
    $(this).append(str);
});
 

Primero selecciono el texto que hay dentro de ".comment p", lo elimino con la funcion empty(), busco en él las palabras que empiezan por @, y las cambio por la misma palabra, con enlace. Finalmente, con append() vuelvo a insertar el texto con el cambio hecho.

Para hastags podria usarse el mismo código, cambiando la arroba por #, también en la url puedes insertar enlaces de Twitter, para @menciones seria así: "http://twitter.com/$2" y para #hastags así "http://twitter.com/search?q=%23$2".

Ojo con la línea que dice "$(this).text();", aquí yo selecciono el texto dentro de ".comment p" para luego borrarlo, cualquier etiqueta dentro será borrada y al no ser texto plano, no se vuelve a insertar en el append(), para esto mejor usar "$(this).html();".


Gracias por vuestra ayuda, señores :D