Buscar palabra en div que no pertenezca a una etiqueta

NSD · #1 (**permalink**) 11/02/2014, 11:51

Hola gente, quisiera seleccionar todo el codigo de un div que no pertenezca a un hijo span de este y ademas, poder reemplazar palabras.

Si tengo este html:

Código HTML:

Ver original<div id="textoid">
Hola, este texto es una prueba, <span class="clase1"> la prueba consiste </span> en reemplazar en <span class="clase2"> este texto </span>
</div>

Quisiera obtener el texto que no esta en los span, seria este:

Cita:

Hola, este texto es una prueba, en reemplazar en

Luego, quisiera reemplazar una palabra, por ejemplo "texto" por "<span class="clase3"> texto </span>"

Quedando asi:

Cita:

Hola, este<span class="clase3"> texto </span>es una prueba, en reemplazar en

y finalmente rearmar el html original quedando asi:

Código HTML:

Ver original<div id="textoid">
Hola, este<span class="clase3"> texto </span>es una prueba, <span class="clase1"> la prueba consiste </span> en reemplazar en <span class="clase2"> este texto </span>
</div>

En si el orden de los pasos no importa, es como se me ocurrio plantear el problema nada mas.

Lo que importa es meter la palabra "texto" en un span de una clase solo si no esta ya dentro de un span.

¿es posible? ¿como? Notese que no se reemplazo la palabr texto que esta en el span de la clase2, solo la aparicion que esta en suelta dentro del div textoid

bathorz · #2 (**permalink**) 13/02/2014, 06:15

Han pasado un par de días desde la pregunta, pero si aún te interesa y no lo haz resuelto, se puede intentar.

NSD · #3 (**permalink**) 13/02/2014, 10:06

Hola, no aun no lo resolvi, habia empezado unos borradores usando el DOM, me paraba en el div, luego recorria los hijos que son textnode (no los span) y buscaba la palabra a reemplazar dentro de estos. estoy medio trabado en esa parte, como convertir un nodo de texto en 3 nodos (el texto antes de la palabra, el span con la palabra, y el texto despues de la pabra) y que quede en el mismo lugar, si puedes ayudarme te lo agradezco porque aun no lo resolvi

jonni09lo · #4 (**permalink**) 13/02/2014, 10:25

Hola @NSD el tema es un poco complicado, pero a partir de esta idea sale el siguiente código:

Código Javascript:

Ver originalvar matchText = function(node, regex, callback) { 
    var child = node.firstChild;
    do {
        if (child.nodeType === 3) {
            child.data.replace(regex, function(all) {
                var args = [].slice.call(arguments),
                    offset = args[args.length - 2];
                if(offset > child.data.length){
                    offset = child.data.indexOf(all);
                }
                var newTextNode = child.splitText(offset);
                newTextNode.data = newTextNode.data.substr(all.length);
                callback.apply(window, [child].concat(args));
                child = newTextNode;
            });
        }
    } while (child = child.nextSibling);
 
    return node;
}
var searchTerm = 'texto';
matchText(document.getElementById("textoid"), new RegExp("\\b" + searchTerm + "\\b", "g"), function(node, match, offset) {
    var span = document.createElement("span");
    span.textContent = match;
    node.parentNode.insertBefore(span, node.nextSibling);
});

DEMO

Saludos

bathorz · #5 (**permalink**) 13/02/2014, 13:12

Atendiendo a la finalidad tenía esta idea:

Código HTML:

Ver original<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title></title>
      <style type="text/css">
         .clase1{color: red;}
         .clase2{color: blue;}
         .clase3{color: lime;}
      </style>
      <script type="text/javascript">
         window.onload = function() {
            var eDiv = document.getElementById('textoid');
            var texto = '';
            var clase = '';
            for (var i = 0; i < eDiv.childNodes.length; i++) {
               // span
               if (eDiv.childNodes[i].nodeName === 'SPAN') {
                  clase = eDiv.childNodes[i].className;
                  cadena = eDiv.childNodes[i].innerHTML;
                  texto += '<span class=' + clase + '>' + cadena + '</span>';
               }
               // Lo que no sea span
               if (eDiv.childNodes[i].nodeName !== 'SPAN') {
                  cadena = eDiv.childNodes[i].nodeValue;
                  texto += cadena.replace(/texto/, '<span class="clase3">texto</span>');
               }
            }
            document.getElementById("rst").innerHTML = texto;
         }
      </script>
   </head>
   <body>
      <div id="textoid">
         Hola, este texto es una prueba, <span class="clase1"> la prueba consiste </span> 
         en reemplazar <span class="clase2">este texto.</span> Por otro texto.
      </div>
      <div id="rst"></div>
   </body>
</html>

jonni09lo · #6 (**permalink**) 13/02/2014, 13:16

Hola, interesante código, lo único "malo" que tiene es que si tienes:

Código HTML:

Ver original<div id="textoid">
    Hola, este texto es una prueba de otro texto, <span class="clase1"> la prueba consiste </span> en reemplazar <span class="clase2">este texto.</span> Por otro texto.
</div>
<div id="rst"></div>

No funcionará

Saludos

bathorz · #7 (**permalink**) 13/02/2014, 14:10

Me olvidé la g: /texto/g

NSD · #8 (**permalink**) 13/02/2014, 15:44

Wow muchas gracias, hacen que parezca facil :) voy a ponerme a estudiar sus codigos cualquier duda los consulto