Conseguir el texto de un div

Adler · #1 (**permalink**) 10/09/2009, 06:10

Hola

Quiero sacar el valor de un div. En eso no hay problema. El problema viene cuando en el texto del div hay algún tag html. En tal caso, solo logro sacar el texto que está delante del primer tag

Código javascript:

Ver original<div id="texto">Esto <b>es</b> una prueba para resaltar caracteres o palabras de este texto</div>
<input type="button" value="Mostrar" onclick="alert(document.getElementById('texto').firstChild.nodeValue);" />

¿Como puedo sacar el valor del div, haya o no haya tags html?

Gracias

quimfv · #2 (**permalink**) 10/09/2009, 06:56

Código HTML:

<div id="texto">Esto <b>es</b> una prueba para resaltar caracteres o palabras de este texto</div>
<input type="button" value="Mostrar" onclick="alert(document.getElementById('texto').innerHTML);" />

No estoy seguro de que sea lo que quieres... puesto que se ven los tags...

Para hacerlo con el DOM como lo hacias tu se puede complicar mucho la cosa ya que dentro de un div potencialmente podria haber infinidad de tags y para mas inri anidados... con lo que tendrias que hacer algun tipo de bucle en entre dentro de los childs del div y dentro de los childs de los childs (nietos del div)... no se si me explico...

Quim

Adler · #3 (**permalink**) 10/09/2009, 07:37

Gracias, quimfv por responder. Realmente lo que quiero es sacar el valor del div, con los tags incluidos, para luego reemplazarlos. Se que suena raro. Lo que me ocupa es resaltar los caracteres o palabras que coincidan con lo insertado en un text

Adler · #4 (**permalink**) 10/09/2009, 12:57

Hola

Ya lo he resulto. Aún falta algunos detalles, pero básicamente el script sería este

Código javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
<script type="text/javascript">
var vuelta = 0;
var cadena = ""
function Resaltar(c,ev) {
var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0;
    if (keyCode == 8) vuelta--;
 
        if (vuelta < 1) {
                cadena = document.getElementById("texto").firstChild.nodeValue;
        }
 
var rg = new RegExp(c,"g");
        if (rg.exec(cadena) != null) {
            var marca = cadena.replace(rg, "<span style=\"background-color:#9ACD32;color:#FFFFFF;\">" + c + "</span>"); 
                document.getElementById("texto").innerHTML = marca;
        document.getElementById("terminos").style.border = "";
        } else {
        document.getElementById("texto").innerHTML = cadena;
        document.getElementById("terminos").style.border = "solid #FF0000 1px";
}
vuelta++;
}
</script>
</head>
<body>
<div id="texto">Esto es una prueba para resaltar caracteres o palabras de este texto prueba</div>
<form method="" action="" name="" autocomplete="off">
<input type="text" value="" id="terminos" onkeyup="Resaltar(this.value,event);" />
</form>
</body>
</html>

Adler · #5 (**permalink**) 11/09/2009, 14:47

Hola

Cuando le he dado el script a un colega y la ha usado se ha dado cuenta de un problema que se produce ante una acción. El problema se produce cuando se inserta un solo carácter, hay coincidencia, y por alguna razón, eliminamos es carácter y dejamos el campo vacío, entonces el valor de la variable cadena pasa a ser (Esto es una), arreglo al script anterior y asumiendo que el carácter que insertamos y luego eliminamos sea p

No logro ver cual puede ser el problema

Gracias

Adler · #6 (**permalink**) 12/09/2009, 14:52

Hola

Se me olvidaba que ya lo solucione. No edito el post anterior para que quede mas claro. Son unos cuantos cambios

Código javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
<script type="text/javascript">
var vuelta = 0;
var cadena = ""
var len = 0;
function Resaltar(c,ev) {
var largo_cadena = len;
var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0;
    
    if (keyCode == 8) vuelta--;
        if (vuelta < 1) {
                cadena += document.getElementById("texto").firstChild.nodeValue;
     }
 
var largo2_cadena = cadena.length
 
    if (largo2_cadena >= largo_cadena) {len = largo_cadena;}
    if (largo_cadena == 0) {len = largo2_cadena;}
 
var rg = new RegExp(c,"g");
 
        if (rg.exec(cadena.substr(0,parseInt(len))) != null) {
            var marca = cadena.substr(0,parseInt(len)).replace(rg, "<span style=\"background-color:#9ACD32;color:#FFFFFF;\">" + c + "</span>"); 
                document.getElementById("texto").innerHTML = marca;
        document.getElementById("terminos").style.border = "";
        } else {
        document.getElementById("texto").innerHTML = cadena;
        document.getElementById("terminos").style.border = "solid #FF0000 1px";
}
vuelta++;
}
</script>
</head>
<body>
<div id="texto">Esto es una prueba para resaltar caracteres o palabras de este texto prueba</div>
<form method="" action="" name="" autocomplete="off">
<input type="text" value="" id="terminos" onkeyup="Resaltar(this.value,event);" />
</form>
</body>
</html>