Ersetzen Sie Wörter im Textkörper

91

Gibt es eine Möglichkeit, den normalen Text in einem Tabellenelement zu ersetzen, das im HTML-Text platziert ist?

Wie "Hallo" durch "Hallo" ersetzen?

Bitte verwenden Sie nur JavaScript ohne jQuery .

Was auch immer
quelle
Können Sie bitte genauer sein? Was möchten Sie ersetzen, wo ist es im Körper usw.
Zirak
Der Körper hat ein Div und darin eine Tabelle, dann möchte ich einen normalen Text ersetzen, der keinen Code wie das Ersetzen von ("Hallo") durch ("Hallo") enthält
Wahtever
3
Die meisten der folgenden Lösungen zerstören alle Ereignisse und die gesamte Dom-Struktur, wenn das zu ersetzende Wort zufällig Klassenname, Tag-Name oder etwas in HTML ist
Muhammad Umer
Es sieht so aus, als ob sowohl Fragen als auch Antworten falsch sind. Es wird gefragt, wie Wörter und keine Zeichen ersetzt werden sollen. Ein solcher Ersatz hello, this is a text randomTexthellosollte sein hi, this is a text randomTexthello. Alle anderen Antworten hier ersetzen jedoch die Zeichen anstelle von Wörtern.
Orhun Alp Oral

Antworten:

136

Um eine Zeichenfolge in Ihrem HTML durch eine andere zu ersetzen , verwenden Sie die Methode replace in innerHTML :

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

Beachten Sie, dass dies die erste Instanz des hellogesamten Körpers ersetzt, einschließlich aller Instanzen in Ihrem HTML-Code (z. B. Klassennamen usw.). Verwenden Sie diese Option daher mit Vorsicht. Versuchen Sie für bessere Ergebnisse, den Umfang Ihrer Ersetzung einzuschränken, indem Sie Ihren Code mithilfe von auswählen document.getElementById oder ähnlich.

Verwenden Sie einen einfachen regulären Ausdruck mit dem gLobal-Flag, um alle Instanzen der Zielzeichenfolge zu ersetzen :

document.body.innerHTML = document.body.innerHTML.replace(/hello/g, 'hi');
Dexter
quelle
1
hat hier nicht für mich gearbeitet, was ich benutzt habe <script type="text/javascript"> window.onload = clear(); function clear() { document.body.innerHTML = document.body.replace('ü', 'n'); } </script>
Wahtever
Bei erweiterten Zeichen kann es komplizierter sein - in welcher Codierung befindet sich Ihr Dokument? Sind Sie sicher, dass der Charakter ein ü ist und nicht & # 252; beispielsweise..?
Dexter
2
Sie haben meinen Code nicht genau kopiert ;-) Stellen Sie sicher, dass Sie auf beiden Seiten der Anweisung innerHTML haben, dh: document.body.innerHTML = document.body.innerHTML.replace ('ü', 'n');
Dexter
3
Zu Ihrer Information - Fehler im ersten Kommentar ist: window.onload = clear;ohne die Klammern "()" gesetzt. Wenn Sie schreiben, führen clear()Sie die Funktion tatsächlich aus, aber Sie möchten die Funktion nur dem Onload-Handler zuweisen
Philipp
1
Beachten Sie, dass die Verwendung von innerHTML heutzutage im Allgemeinen als schlecht angesehen wird: slidehare.net/x00mario/the-innerhtml-apocalypse
kufudo
13

Die folgende Funktion funktioniert perfekt für mich:

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

Hier ist ein Anwendungsbeispiel:

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

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

Sie können auch einen direkten Ersatz verwenden, wie folgt:

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

Aber seien Sie vorsichtig damit, da dies auch die Tags, CSS und Skripte beeinflussen kann.

BEARBEITEN: Verwenden Sie für eine reine JavaScript-Lösung stattdessen diese Methode:

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
quelle
Wie würde man vorgehen, um den gesamten Text in einem bestimmten Tag (wie <p> oder <span>) durch einen anderen Text zu ersetzen?
GJZ
Fügen Sie einfach die Tag-Namen zum ersten Eingabeparameter hinzu, z. B. replaceText ('p, span', 'hallo', 'hi')
Ziad
Dies funktioniert nicht richtig. Beachten Sie Folgendes: <p> Hallo <strong> Welt </ strong> </ p>. Hallo wird nicht ersetzt.
David Vielhuber
Hallo, ich bin Anfänger im Codieren. Ich kann mit AppleScript etwas Gutes tun. Aber das ist alles was ich weiß. Können Sie mir bitte einige Ratschläge geben? Zunächst möchte ich Javascript verwenden, um das Sammeln von Datenbanken, Bildern, Videos, das Ausfüllen von Webformularen und das Hochladen zu automatisieren. Möglicherweise arbeiten Sie mit Excel. Applescript ist damit in Ordnung, aber Java scheint ein ganz neues Level zu sein und viel besser. Womit soll ich beginnen, um meine Ziele zu erreichen? Ich weiß 0 über Javascript und ich weiß nicht einmal, wie ich Ihr Skript oben zum Laufen bringen kann! Wo soll ich es einfügen? Vielen Dank!
Duy Duy
10

Am Ende hatte ich diese Funktion, um Text (ohne Nebenwirkungen) sicher zu ersetzen:

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 ist für Fälle, in denen die 16kB findAndReplaceDOMTextetwas zu schwer sind.

Funky-Zukunft
quelle
Hallo, ich bin Anfänger im Codieren. Ich kann mit AppleScript etwas Gutes tun. Aber das ist alles was ich weiß. Können Sie mir bitte einige Ratschläge geben? Zunächst möchte ich Javascript verwenden, um das Sammeln von Datenbanken, Bildern, Videos, das Ausfüllen von Webformularen und das Hochladen zu automatisieren. Möglicherweise arbeiten Sie mit Excel. Applescript ist damit in Ordnung, aber Java scheint ein ganz neues Level zu sein und viel besser. Womit soll ich beginnen, um meine Ziele zu erreichen? Ich weiß 0 über Javascript und ich weiß nicht einmal, wie ich Ihr Skript oben zum Laufen bringen kann! Wo soll ich es einfügen? Vielen Dank!
Duy Duy
Duy Duy, das sind viele Probleme. Grund genug, den Job zu beenden, ist allein die Beschreibung der Aufgabe.
Funky-Future
9

Ich hatte das gleiche Problem. Ich habe meine eigene Funktion mit replace auf innerHTML geschrieben, aber es würde Ankerverbindungen und dergleichen vermasseln.

Damit es richtig funktioniert, habe ich eine Bibliothek verwendet , um dies zu erledigen.

Die Bibliothek hat eine tolle API. Nachdem ich das Skript eingefügt hatte, nannte ich es so:

findAndReplaceDOMText(document.body, {
  find: 'texttofind',
  replace: 'texttoreplace'
  }
);
David Silva Smith
quelle
Dies war die einzige Lösung, die für mein Problem funktioniert hat. Ich musste REGEX verwenden, um Telefonnummern auf einer ganzen Site zu finden und zu ersetzen, und andere Antworten hier würden meine DOM-Ereignisse zerstören.
DavyH
2

Verwenden Sie die Standardfunktion zum Ersetzen von Javascript-Zeichenfolgen

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

Ich habe versucht, eine wirklich große Zeichenfolge zu ersetzen, und aus irgendeinem Grund haben reguläre Ausdrücke einige Fehler / Ausnahmen ausgelöst.

Also habe ich diese Alternative zu regulären Ausdrücken gefunden, die auch ziemlich schnell läuft. Zumindest war es schnell genug für mich:

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

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

src: Wie ersetze ich alle Vorkommen einer Zeichenfolge in JavaScript?

Bartho Bernsmann
quelle
1

Versuchen Sie, die oben vorgeschlagene Lösung auf ein ziemlich großes Dokument anzuwenden, indem Sie ziemlich kurze Zeichenfolgen ersetzen, die möglicherweise in innerHTML oder sogar innerText vorhanden sind, und Ihr HTML-Design wird bestenfalls beschädigt

Daher nehme ich zunächst nur Textknotenelemente über HTML-DOM-Knoten auf

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

`und folglich habe ich den Ersatz auf alle im Zyklus angewendet

FantomX1
quelle
1

Wollte der Antwort von funky-future ein Beispiel hinzufügen , da ich immer wieder diesen Fehler bekam:

Uncaught TypeError: element.childNodes is not iterable

Verwendung wie folgt:

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

Bei jQuery-Selektoren hat es bei mir nicht funktioniert.

Y Stroli
quelle
1
Wenn Sie eine neue Frage haben, fragen Sie es bitte durch Klicken Frage stellen Taste. Fügen Sie einen Link zu dieser Frage hinzu, wenn dies zur Bereitstellung des Kontexts beiträgt. - Von der Überprüfung
SilverNak
1
Dies ist keine neue Frage. Ich habe die Antwort von funky-future erweitert, indem ich ein Beispiel gegeben habe, das funktioniert. musste eine neue Antwort posten, da mir der Repräsentant fehlt, um seine zu kommentieren.
Y Stroli
0

Ich bin neu in Javascriptund habe gerade angefangen, diese Fähigkeiten zu lernen. Bitte überprüfen Sie, ob die folgende Methode nützlich ist, um den Text zu ersetzen.

<script>

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

</script>
Manish
quelle
0

Manchmal document.body.innerHTMLbricht das Ändern einige JS-Skripte auf der Seite. Hier ist eine Version, die nur den Inhalt von textElementen ändert :

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
quelle