Foros del Web - Ver Mensaje Individual

emprear · #5 (**permalink**) 26/02/2013, 10:55

Convengamos primero que crear tu propio editor no es muy sencillo

Primero una aclaración, un textarea trata al código html como texto, así que no tendrías que utilizar necesariamente entidades html, salvo que si no lo hacés no te validaría como xhtml, por lo tanto si usas html sin convertirlo a entidades en el textarea, deberías utilizar el doctype de html5, con lo cual te validaría.

Con respecto a colorear un email, puede resolverse facilmente con un split() de javascript, claro que un editor supuestamente puede contener cosas bastante más complejas, por lo habría que utilizar métodos más complejos, expresiones regulares, etc.

Te dejo una demo, pero cuidado que el coloreado solo sirve para emails del tipo
[email protected], si hubiese más puntos en el email, p. ej [email protected], ya no te serviría

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function pasarAlDiv(ta){
var v = document.getElementById(ta).value;
document.getElementById('resultados').innerHTML =v;
}
 
function colorear(){
var v = document.getElementById('email').value;
var a = v.split('@');
var b = a[1].split('.');
document.getElementById('resultados').innerHTML ="<span style='color: red'>" + a[0] + "</span>@<span style='color: green'>" + b[0] +"</span>.<span style='color: navy'>"+ b[1] +"</span>";
}
//]]>
</script>
</head>
<body>
<p>Editor 1</p>
<textarea cols="60" rows="3" id="editor1">
&lt;div style=&quot;background: lime; width: 100px; height: 100px;&quot;&gt;
Contenido de div en textarea
&lt;/div&gt;
</textarea>
<button onclick="pasarAlDiv('editor1')">Pasar al div resultados</button>
<p>Editor 2</p>
<textarea cols="60" rows="3" id="editor2">
<div style="background: orange; width: 100px; height: 100px;">
Contenido de div en textarea
</div>
</textarea>
<button onclick="pasarAlDiv('editor2')">Pasar al div resultados</button>
<p>Colorear</p>
<form>
<input type="text" value="[email protected]" id="email" size="50" />
<input type="button" onclick="colorear();" value="Colorear" />
</form>
<p>Div resultados</p>
<div id="resultados"></div>
</body>
</html>

Notá que un textarea tiene entidades y el otro no

Saludos