Remplacer les mots dans le corps du texte

Existe-t-il un moyen de remplacer le texte normal dans un élément de tableau placé dans le corps du HTML?

Comme remplacer "bonjour" par "salut"?

Veuillez n'utiliser que JavaScript sans jQuery .

Pour remplacer une chaîne dans votre HTML par une autre, utilisez la méthode replace sur innerHTML :

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

Notez que cela remplacera la première instance de hellodans tout le corps, y compris toutes les instances de votre code HTML (par exemple les noms de classe, etc.), donc utilisez avec prudence - pour de meilleurs résultats, essayez de restreindre la portée de votre remplacement en ciblant votre code en utilisant document.getElementById ou similaire.

Pour remplacer toutes les instances de la chaîne cible, utilisez une expression régulière simple avec l' gindicateur lobal:

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

La fonction ci-dessous fonctionne parfaitement pour moi:

// 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));
  });
}

Voici un exemple d'utilisation:

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

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

Vous pouvez également utiliser faire un remplacement direct comme ceci:

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

Mais soyez prudent car cela peut également affecter les balises, le CSS et les scripts.

EDIT: Comme pour une solution JavaScript pure, utilisez plutôt cette méthode:

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);
}

J'ai fini avec cette fonction pour remplacer en toute sécurité le texte sans effets secondaires (jusqu'à présent):

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);
        }
    }
}

C'est pour les cas où les 16 Ko de findAndReplaceDOMTextsont un peu trop lourds.

J'ai eu le même problème. J'ai écrit ma propre fonction en utilisant replace sur innerHTML, mais cela ferait bousiller les liens d'ancrage et autres.

Pour que cela fonctionne correctement, j'ai utilisé une bibliothèque pour le faire.

La bibliothèque a une API géniale. Après avoir inclus le script, je l'ai appelé comme ceci:

findAndReplaceDOMText(document.body, {
  find: 'texttofind',
  replace: 'texttoreplace'
  }
);

J'essayais de remplacer une très grande chaîne et pour une raison quelconque, les expressions régulières lançaient des erreurs / exceptions.

J'ai donc trouvé cette alternative aux expressions régulières qui fonctionne également assez rapidement. Au moins, c'était assez rapide pour moi:

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

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

src: Comment remplacer toutes les occurrences d'une chaîne en JavaScript?

Utilisez la fonction de remplacement de chaîne javascript par défaut

var curInnerHTML = document.body.innerHTML;
curInnerHTML = curInnerHTML.replace("hello", "hi");
document.body.innerHTML = curInnerHTML;

Essayez d'appliquer la solution suggérée ci-dessus sur un document assez volumineux, en remplaçant les chaînes assez courtes qui pourraient être présentes dans innerHTML ou même innerText, et votre conception html devient au mieux cassée

Par conséquent, je prends d'abord uniquement les éléments de nœud de texte via des nœuds HTML DOM, comme ceci

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');    

`et ensuite j'ai appliqué le remplacement sur chacun d'eux en cycle

Je voulais ajouter un exemple à la réponse de funky-future car je continuais à recevoir cette erreur:

Uncaught TypeError: element.childNodes is not iterable

utiliser comme ceci:

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

cela n'a pas fonctionné pour moi avec les sélecteurs jQuery.

Parfois, le changement document.body.innerHTMLinterrompt certains scripts JS sur la page. Voici la version, qui ne change que le contenu des textéléments:

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");

Je suis nouveau Javascriptet je viens de commencer à apprendre ces compétences. Veuillez vérifier si la méthode ci-dessous est utile pour remplacer le texte.

<script>

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

</script>