Reemplazar palabras en el cuerpo del texto

93

¿Hay alguna forma de reemplazar el texto normal dentro de un elemento de tabla que se coloca dentro del cuerpo del HTML?

¿Te gusta reemplazar "hola" por "hola"?

Utilice únicamente JavaScript sin jQuery .

Lo que sea
fuente
¿Puedes ser más específico por favor? ¿Qué desea reemplazar, dónde está en el cuerpo, etc.?
Zirak
el cuerpo tiene un div y dentro de eso una tabla, luego me gustaría reemplazar un texto normal, no un código como reemplazar ("hola") con ("hola")
Wahtever
3
la mayoría de las soluciones a continuación destruirán todos los eventos y toda la estructura de dom si la palabra reemplazada resultó ser el nombre de la clase, el nombre de la etiqueta o cualquier cosa en html
Muhammad Umer
Parece que tanto la pregunta como las respuestas son incorrectas. Pregunta cómo reemplazar palabras y no caracteres. Como el reemplazo de este hello, this is a text randomTexthellodebería ser hi, this is a text randomTexthello. Sin embargo, todas las demás respuestas aquí reemplazan los caracteres en lugar de las palabras.
Orhun Alp Oral

Respuestas:

139

Para reemplazar una cadena en su HTML con otra, use el método de reemplazo en innerHTML :

document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');

Tenga en cuenta que esto reemplazará la primera instancia de en hellotodo el cuerpo, incluidas las instancias en su código HTML (por ejemplo, nombres de clases, etc.), así que úselo con precaución; para obtener mejores resultados, intente restringir el alcance de su reemplazo al apuntar a su código usando document.getElementById o similar.

Para reemplazar todas las instancias de la cadena de destino, use una expresión regular simple con la gbandera lobal:

document.body.innerHTML = document.body.innerHTML.replace(/hello/g, 'hi');
Diestro
fuente
1
No funcionó para mí, esto es lo que usé <script type="text/javascript"> window.onload = clear(); function clear() { document.body.innerHTML = document.body.replace('ü', 'n'); } </script>
sea
Puede ser más complicado con caracteres extendidos: ¿en qué codificación está su documento? ¿Estás seguro de que el carácter es una ü y no & # 252; por ejemplo..?
Dexter
2
no copió mi código con precisión ;-) asegúrese de tener innerHTML en ambos lados de la declaración, es decir: document.body.innerHTML = document.body.innerHTML.replace ('ü', 'n');
Dexter
3
FYI - El error en el primer comentario es: establecido window.onload = clear;sin los paréntesis "()". Cuando escribe clear(), en realidad ejecuta la función, pero solo desea asignar la función al controlador de carga
Philipp
1
Tenga en cuenta que el uso de innerHTML generalmente se considera malo en estos días: slideshare.net/x00mario/the-innerhtml-apocalypse
kufudo
13

La función a continuación funciona perfectamente para mí:

// Note this *is* JQuery, see below for JS solution instead
function replaceText(selector, text, newText, flags) {
  var matcher = new RegExp(text, flags);
  $(selector).each(function () {
    var $this = $(this);
    if (!$this.children().length)
       $this.text($this.text().replace(matcher, newText));
  });
}

Aquí tienes un ejemplo de uso:

function replaceAllText() {
  replaceText('*', 'hello', 'hi', 'g');
}

$(document).ready(replaceAllText);
$('html').ajaxStop(replaceAllText);

También puede usar hacer un reemplazo directo como este:

document.body.innerHTML = document.body.innerHTML.replace('hello', 'hi');

Pero tenga cuidado con esto ya que puede afectar las etiquetas, CSS y scripts también.

EDITAR: En cuanto a una solución de JavaScript pura, use este método en su lugar:

function replaceText(selector, text, newText, flags) {
  var matcher = new RegExp(text, flags);
  var elems = document.querySelectorAll(selector), i;

  for (i = 0; i < elems.length; i++)
    if (!elems[i].childNodes.length)
      elems[i].innerHTML = elems[i].innerHTML.replace(matcher, newText);
}
Ziad
fuente
¿Cómo se reemplazaría todo el texto en una etiqueta específica (como <p> o <span>) con algún otro texto?
GJZ
Simplemente agregue el (los) nombre (s) de la etiqueta al primer parámetro de entrada, por ejemplo, replaceText ('p, span', 'hello', 'hi')
Ziad
Esto no funciona correctamente. Considere esto: <p> hola <strong> mundo</ 0000- </p>. hola no se reemplaza.
David Vielhuber
Hola, soy un principiante en la codificación. Puedo hacer algo bueno con AppleScript. Pero eso es todo lo que sé. ¿Puede darme algunos consejos? Para empezar, mi propósito es utilizar javascript para automatizar la recopilación de bases de datos, imágenes, videos, llenar formularios web, cargar, puede ser trabajar con Excel. Applescript está de acuerdo, pero Java parece ser un nivel completamente nuevo y mucho mejor. ¿Con qué debo comenzar para lograr mis propósitos? ¡Sé 0 sobre javascript y ni siquiera sé cómo hacer que el script anterior funcione! ¿Dónde supongo que debo pegarlo? ¡Muchas gracias!
Duy Duy
10

Terminé con esta función para reemplazar de forma segura el texto sin efectos secundarios (hasta ahora):

function replaceInText(element, pattern, replacement) {
    for (let node of element.childNodes) {
        switch (node.nodeType) {
            case Node.ELEMENT_NODE:
                replaceInText(node, pattern, replacement);
                break;
            case Node.TEXT_NODE:
                node.textContent = node.textContent.replace(pattern, replacement);
                break;
            case Node.DOCUMENT_NODE:
                replaceInText(node, pattern, replacement);
        }
    }
}

Es para casos en los que los 16kB findAndReplaceDOMTextson demasiado pesados.

futuro funky
fuente
Hola, soy un principiante en la codificación. Puedo hacer algo bueno con AppleScript. Pero eso es todo lo que sé. ¿Puede darme algunos consejos? Para empezar, mi propósito es utilizar javascript para automatizar la recopilación de bases de datos, imágenes, videos, llenar formularios web, cargar, puede ser trabajar con Excel. Applescript está de acuerdo, pero Java parece ser un nivel completamente nuevo y mucho mejor. ¿Con qué debo comenzar para lograr mis propósitos? ¡Sé 0 sobre javascript y ni siquiera sé cómo hacer que el script anterior funcione! ¿Dónde supongo que debo pegarlo? ¡Muchas gracias!
Duy Duy
Duy Duy, eso son muchos problemas. Dada la descripción de la tarea por sí sola, es razón suficiente para dejar el trabajo.
funky-future
9

Yo tuve el mismo problema. Escribí mi propia función usando reemplazar en innerHTML, pero estropearía los enlaces de anclaje y demás.

Para que funcione correctamente, utilicé una biblioteca para hacer esto.

La biblioteca tiene una API impresionante. Después de incluir el script lo llamé así:

findAndReplaceDOMText(document.body, {
  find: 'texttofind',
  replace: 'texttoreplace'
  }
);
David Silva Smith
fuente
Esta fue la única solución que funcionó para mi problema. Necesitaba usar REGEX para encontrar y reemplazar números de teléfono en todo un sitio y otras respuestas aquí romperían mis eventos DOM.
DavyH
3

Estaba tratando de reemplazar una cadena realmente grande y, por alguna razón, las expresiones regulares arrojaban algunos errores / excepciones.

Entonces encontré esta alternativa a las expresiones regulares que también se ejecuta bastante rápido. Al menos fue lo suficientemente rápido para mí:

var search = "search string";
var replacement = "replacement string";

document.body.innerHTML = document.body.innerHTML.split(search).join(replacement)

src: ¿Cómo reemplazar todas las apariciones de una cadena en JavaScript?

Bartho Bernsmann
fuente
2

Utilice la función de reemplazo de cadena de JavaScript predeterminada

var curInnerHTML = document.body.innerHTML;
curInnerHTML = curInnerHTML.replace("hello", "hi");
document.body.innerHTML = curInnerHTML;
Mark Costello
fuente
1

Intente aplicar la solución sugerida anteriormente en documentos bastante grandes, reemplazando cadenas bastante cortas que pueden estar presentes en innerHTML o incluso innerText, y su diseño html se rompe en el mejor de los casos

Por lo tanto, primero recojo solo elementos de nodo de texto a través de nodos DOM HTML, como este

function textNodesUnder(node){
  var all = [];
  for (node=node.firstChild;node;node=node.nextSibling){
    if (node.nodeType==3) all.push(node);
    else all = all.concat(textNodesUnder(node));
  }
  return all;
}

textNodes=textNodesUnder(document.body)
for (i in textNodes) { textNodes[i].nodeValue = textNodes[i].nodeValue.replace(/hello/g, 'hi');    

`y luego apliqué el reemplazo en todos ellos en ciclo

FantomX1
fuente
1

Quería agregar un ejemplo a la respuesta de funky-future ya que seguía recibiendo este error:

Uncaught TypeError: element.childNodes is not iterable

usar así:

replaceInText(document.body,"search term","replacement");

no funcionó para mí con los selectores de jQuery.

Y Stroli
fuente
1
Si tiene una nueva pregunta, hágala haciendo clic en el botón Preguntar . Incluya un enlace a esta pregunta si ayuda a proporcionar contexto. - De la crítica
SilverNak
1
Esta no es una pregunta nueva, estaba ampliando la respuesta de funky-future al proporcionar un ejemplo que funciona. Tuve que publicar una nueva respuesta porque me falta representante para comentar la suya.
Y Stroli
0

Soy nuevo Javascripty acabo de comenzar a aprender estas habilidades. Compruebe si el método siguiente es útil para reemplazar el texto.

<script>

    var txt=document.getElementById("demo").innerHTML;
    var pos = txt.replace(/Hello/g, "hi")
    document.getElementById("demo").innerHTML = pos;

</script>
Manish
fuente
0

A veces, el cambio document.body.innerHTMLrompe algunos scripts JS en la página. Aquí está la versión, que solo cambia el contenido de los textelementos:

function replace(element, from, to) {
    if (element.childNodes.length) {
        element.childNodes.forEach(child => replace(child, from, to));
    } else {
        const cont = element.textContent;
        if (cont) element.textContent = cont.replace(from, to);
    }
};

replace(document.body, new RegExp("hello", "g"), "hi");
Oleksandr Boiko
fuente