Cómo reemplazar BBCode por etiquetas HTML con jQuery

A veces nos podemos encontrar con proyectos que requieren crear herramientas para facilitar la forma de implementar estilo a un texto al escritor. Este código puede ser utilizado con facilidad para blogs, foros o cualquier otra plataforma.

Nuestro código jQuery

Este código es solamente una demostración, ustedes lo podrán manipular para otros usos.

Explicando un poco el código: Tenemos dos variables, una llamada $buscar donde definimos un array de todos los elementos que buscaremos más adelante con la función replace(). En este caso como es más complejo que buscar un texto (Ejemplo: /Hola Mundo/ig) utilizamos expresiones regulares para buscar las etiquetas BBCode (Ejemplo: /\[intro\](.*?)\[\/intro\]/ig). En la variable $reemplazar, escribimos las etiquetas html con que reemplazaremos los BBCode de la variable $buscar.

Creamos un for en el que le asignamos en la expr2 ( for(expr1, expr2, expr3) ) el número 3 ya que es la cantidad de BBCode que tenemos en la variable $buscar.

Dentro del for tenemos a la función replace() que será la encargada de cambiar los datos de la variable $buscar por los de la variable $reemplazar en nuestro HTML.

HTML

Este HTML sirve para el ejemplo anterior

CSS

Dándole un poco de estilo para que se vean los resultados.

Demo

Puedes ir navegando por las distintas pestañas para ver como esta escrito el código y en la pestaña “Result” ves el resultado final, si quieres puedes verlo directamente en jsFiddle

Modificado por última vez el día 11 de agosto de 2012 a las 16:29
Scroll to top