Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de Añadir estilos y url a una palabra cuando se nombra a un user con @ como en Twitter en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/11/2012, 07:15
Avatar de Adbane  
Fecha de Ingreso: junio-2011
Mensajes: 86
Antigüedad: 13 años, 4 meses
Puntos: 6
Pregunta Añadir estilos y url a una palabra cuando se nombra a un user con @ como en Twitter

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
__________________
Diseñador web por amor al arte, o al HTML mejor dicho
  #2 (permalink)  
Antiguo 19/11/2012, 10:13
Avatar de rosonator  
Fecha de Ingreso: noviembre-2012
Ubicación: Bilbao
Mensajes: 49
Antigüedad: 12 años
Puntos: 7
Respuesta: Añadir estilos y url a una palabra cuando se nombra a un user con @ como e

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
  #3 (permalink)  
Antiguo 19/11/2012, 10:26
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años
Puntos: 317
Respuesta: Añadir estilos y url a una palabra cuando se nombra a un user con @ como e

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.
  #4 (permalink)  
Antiguo 19/11/2012, 11:47
Avatar de Adbane  
Fecha de Ingreso: junio-2011
Mensajes: 86
Antigüedad: 13 años, 4 meses
Puntos: 6
Respuesta: Añadir estilos y url a una palabra cuando se nombra a un user con @ como e

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:
Ver original
  1. $('.comment p').each(function(){
  2.     var str = $(this).text();
  3.     $(this).empty();
  4.  
  5.     str = ' '+str;
  6.     str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1<a href="http://misitio.com/usuarios/$2" class="user">@$2</a>');
  7.  
  8.     $(this).append(str);
  9. });

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
__________________
Diseñador web por amor al arte, o al HTML mejor dicho

Etiquetas: estilos, palabra, twitter, url, usuarios
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:11.