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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$(document).ready(function(){
$buscar = [
/\[intro\](.*?)\[\/intro\]/ig,
/\[youtube\](.*?)\[\/youtube]/ig,
/\[final\](.*?)\[\/final\]/ig
];
$reemplazar = [
‘<div class=”intro”>$1</div>’,
‘<iframe width=”560″ height=”315″ src=”http://www.youtube.com/embed/$1″ frameborder=”0″ allowfullscreen></iframe>’,
‘<div class=”final”>$1</div>’
];
for(var i = 0; i < 3; i++) {
$(‘.post’).html($(‘.post’).html().replace($buscar[i], $reemplazar[i]));
}
});
|
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
|
1
2
3
4
5
6
|
<div class=“post”>
[intro]Hola Mundo!, transformamos los BBCode en HTML![/intro]
<p>Estamos probando como funciona el código</p>
[youtube]o018byLnMFM[/youtube]
[final]Nos despedimos del tutorial[/final]
</div>
|
CSS
Dándole un poco de estilo para que se vean los resultados.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
body {
font: normal 14px ‘Helvetica Neue’, Helvetica, Arial, sans–serif;
}
p {
margin–bottom: 10px;
padding: 0 10px;
}
.intro {
margin–bottom: 10px;
padding: 10px;
background: #F1F1F1;
}
.final {
margin–bottom: 10px;
padding: 10px;
background: #CCC;
}
|
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