bbCode sobre el texto de un cuadro textarea.

En categoría: Edición Cadenas de Texto

El siguiente ejemplo JavaScript realiza un bbCode sobre el texto escrito en un cuadro TEXTAREA. Podemos insertar todos los elementos textarea que queramos y cada uno tendrá su propia edición de texto bbCode.

| Descripción del ejemplo JavaScript

Si bien este ejemplo JavaScript necesita muchos arreglos para que se ajuste a cualquier sitio que quiera utilizar este tipo de herramienta, el mismo nos permite ver de que manera es posible transformar ciertos códigos (escritos en bbCode) a el código HTML correspondiente.

Para cualquier persona que quiera utilizar este ejemplo hay algunas cosas importantes a tener en cuanta:

A cada textarea que contenga un bbCode y que obviamente queramos editar para mostrar el mismo con sus etiquetas HTML correspondientes debemos darle una clase igual a "comentario"
Cada elemento textarea a ser editado debe formar parte de un formulario, no importa que éste tenga una clase pero si es muy importante que tenga solo un elemento, es decir el textarea a ser editado.
Cada elemento textarea tendrá un elemento DIV (etiqueta escrita es mayúscula) con la clase "divcoment". No es necesario que este elemento DIV esté en una posición determinada pero se aconseja que esté inmediatamente por encima del formulario asociado.
Las etiquetas bbCode programadas para este Script son: [b] (texto en negrita), [i] (texto en cursiva), [u] (texto subrayado), [code] (código), [blockquote] (texto de cita). La etiqueta bbCode [blockquote] se transforma en <cite> ya que <blockquote> presenta algunas incompatibilidades entre navegadores.
Podemos insertar otras etiquetas bbCode, pero debemos saber crear expresiones regulares para que reemplacen éstas por las etiquetas HTML correspondientes.

Información relativa al Script

Compatible con: Internet Explorer

Internet Explorer

Firefox

Tamaño del Script: 5KB

Probar el Script

Temas relacionados a este Script

Ejemplo JavaScript para reemplazar etiquetas bbCode escritas en un cuadro de texto 
TEXTAREA, por las etiquetas HTML correspondientes.

Código fuente del script:

<HTML>
<HEAD>

<script language="javascript">

// Creamos un array sobre los elementos div de la página
var objetoDIV = document.getElementsByTagName('DIV')
// Hacemos lo mismo sobre los objetos form (formularios)
var objetoForm = document.forms

var m = 0
var i = 0
var k = 0

/* Creamos una expresión regular para las etiquetas bbCode:
[b][/b], [i][/i], [u][/u] */
var expresionCode = /(\s)*(\[)([b|i|u|\/b|\/i|\/u]*)(\])(\s)*/ig;
var sustituirCode = '$1<$3>$5'
/* Creamos una expresión regular para las etiquetas bbCode:
[code] */
var expresionCode2 = /(<br \/>)*(\[)([code]*)(\])/ig;
var sustituirCode2 = '<p><$3>'
/* Creamos una expresión regular para las etiquetas bbCode:
[/code] */
var expresionCode3 = /(\[)([\/code|]*)(\])(<br \/>)*/ig;
var sustituirCode3 = '<$2></p>'
/* Creamos una expresión regular para las etiquetas bbCode:
[blockquote] */
var expresionCode4 = /(<br \/>)*(\[)([blockquote]*)(\])/ig;
var sustituirCode4 = '<p><cite>'
/* Creamos una expresión regular para las etiquetas bbCode:
[/blockquote] */
var expresionCode5 = /(\[)([\/blockquote]*)(\])(<br \/>)*/ig;
var sustituirCode5 = '</cite></p>'
/* Creamos una expresión regular para las etiquetas bbCode:
[link] */
var expresionLink = /\[enlace href="((http:\/\/)[a-z0-9]([a-z09-]*)[a-z0-9]\.[a-z0-9]([a-z09-]*)[a-z0-9]\.([a-z]{2,3}([\/]*))([\.][a-z]{2}([\/]*))*([\/][\S]+)*)"\]/ig;
var sustituirLink = ' <a href="$1" target="_blank" rel="nofollow">'
/* Creamos una expresión regular para las etiquetas bbCode:
[/link] */
var expresionLink2 = /(\[)([\/enlace]*)(\])/ig;
var sustituirLink2 = '</a> '

/* Creamos las expresiones regulares para reemplazar los saltos de 
línea por la etiqueta <br> */
var expresionLinea = /(\r\n|\n|\r)/ig;
var sustituirLinea = '<br>'
var expresionLinea2 = /(<br\s\/>\s*){2,}/ig;
var sustituirLinea2 = '<br><br>'

/* Creamos esta función que lee el contenido del textarea correspondiente
y reemplaza las etiquetas bbCode por las etiquetas HTML correspondientes */
function bbCodeLeer() {

// Si i es menor o igual a la cantidad de formularios menos 1
if (i <= objetoForm.length-1) {
	// Si el textarea tiene como className = comentario
	if (objetoForm[i].elements[m].className == 'comentario') {
	// Guardamos el valor del cuadro
comentario = objetoForm[i].elements[m].value
	// Realizamos todos los reemplazos
comentario = comentario.replace (expresionCode, sustituirCode)
comentario = comentario.replace (expresionLink2, sustituirLink2)
comentario = comentario.replace (expresionCode3, sustituirCode3)
comentario = comentario.replace (expresionCode4, sustituirCode4)
comentario = comentario.replace (expresionCode5, sustituirCode5)
comentario = comentario.replace (expresionLink, sustituirLink)
comentario = comentario.replace (expresionLinea, sustituirLinea)
	// Definimos nuevamente el valor con las etiquetas reemplazadas
objetoForm[i].elements[m].value = comentario
k++
// Ejecutamos la función que escribe en el objeto DIV
bbCodeEscribir()
	}
	else {
i++
// Ejecutamos nuevamente la función
bbCodeLeer()
	}
}
}

/* Esta función escribe en el objeto DIV el texto 
correspondiente al cuadro textarea */
function bbCodeEscribir() {
	// Si el objeto DIV tiene como className = divcoment
	if (objetoDIV[k].className == 'divcoment') {
/* Hacemos un innerHTML sobre el objeto escribiendo el texto del cuadro
con las etiquetas HTML ya escritas */
objetoDIV[k].innerHTML = objetoForm[i].elements[m].value
i++
// Ejecutamos la función en busca de otro cuadro textarea
bbCodeLeer()
	}
	else {
k++
// Volvemos a ejecutar la función
bbCodeEscribir()
	}
}

</script>

</HEAD>

<BODY onLoad="bbCodeLeer()">

<DIV></DIV>

<FORM>

<DIV class="divcoment"></DIV>

<TEXTAREA class="comentario" rows="15" cols="90">[b]Ejemplo JavaScript para realizar un bbCode sobre el texto almacenado 
en un cuadro textarea.[/b]
En este ejemplo se [i][b]reemplazarán los códigos[/b][/i] correspondientes escritos en el textarea por el 
código necesario para mostrar [u]el texto editado[/u] según el formato HTML correspondiente.
Podemos ver como el texto del textarea se trasladó hacia el objeto DIV editado con su 
correspondiente etiqueta HTML.
En este ejemplo se reemplazarán las etiquetas bbCode para escribir el texto en:
[blockquote] bold (b = negrita), italic (i = cursiva), underline (u = subrayado), 
codigo (code = codigo), cita de texto (blockquote = cite) y enlace (a = enlace).[/blockquote]
Creamos un enlace: [enlace href="http://www.codigojavascript.com/"]Código JavaScript[/enlace].
Puedes escribir algún texto encerrado en etiquetas bbCode permitidas y presionar F5 (reload) 
para que los cambios se reflejen automáticamente</TEXTAREA>

</FORM>

<form>
<textarea cols="30" rows="5">Este cuadro textarea no será editado ya que no tiene como className 
un valor igual a comentario</textarea>
</form>

<FORM>
<DIV class="divcoment"></DIV>

<TEXTAREA class="comentario" rows="5" cols="90">Este cuadro sirve de ejemplo para ver que podemos 
insertar todos los textarea que queramos, siempre y cuando le demos una clase igual a comentario.
Insertamos una etiqueta bbCode para transformar el texto en negrita: [b]este texto está 
en negrita[/b]</TEXTAREA>

</FORM>

</BODY>
</HTML>

	Temas relacionados a este Script:
	Eliminar Espacios al Principio y Final de una Cadena de Texto Reemplazar Espacios en Cadena de Texto Convertir cadena de texto a mayúsculas o minúsculas Cortar palabras largas con JavaScript bbCode sobre el texto de un cuadro textarea Eliminar espacios de una cadena de texto mientras se escribe

Comentarios Recibidos sobre: bbCode sobre el texto de un cuadro textarea

Todavía nadie comentó este artículo.
Para insertar un comentario hacé clic en "Comentar artículo"

Comentar Artículo

Agradecemos todos los comentarios. Gracias por ayudarnos a mejorar el sitio.
Importante: Los comentarios están para ampliar el artículo propuesto en esta página, proponer o responder alguna consulta de otro visitante. En ningún caso nos hacemos responsables del contenido publicado en los comentarios. En el caso que formules una pregunta y ésta no sea respondida, puedes solicitarnos ayuda desde el formulario de ayuda aunque no te aseguramos una respuesta inmediata.