Zastąp słowa w tekście podstawowym


94

Czy istnieje sposób na zastąpienie zwykłego tekstu w elemencie tabeli, który jest umieszczony w treści HTML?

Lubisz zamienić „cześć” na „cześć”?

Proszę używać JavaScript bez jQuery .


Czy możesz podać bardziej szczegółowe informacje? Co chcesz wymienić, gdzie jest w ciele itp.
Zirak 05.04.11

ciało ma element div, a w nim tabelę, chciałbym zastąpić zwykły tekst, a nie kod, taki jak zastępowanie („cześć”)
słowem

3
poniżej większość rozwiązań zniszczy wszystkie wydarzenia i całą strukturę DOM jeśli słowo zastępowane stało się nazwę klasy, nazwę znacznika lub coś w html
Muhammad Umer

Wygląda na to, że zarówno pytanie, jak i odpowiedzi są błędne. Pyta, jak zamienić słowa, a nie znaki. Takie jak zastąpienie tego hello, this is a text randomTexthellopowinno być hi, this is a text randomTexthello. Jednak wszystkie inne odpowiedzi tutaj zastępują znaki zamiast słów.
Orhun Alp Oral

Odpowiedzi:


140

Aby zamienić ciąg znaków w kodzie HTML na inny, użyj metody replace na innerHTML :

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

Pamiętaj, że spowoduje to zastąpienie pierwszego wystąpienia w hellocałym treści, w tym wszelkich wystąpień w kodzie HTML (np. Nazwy klas itp.), Więc używaj ostrożnie - aby uzyskać lepsze wyniki, spróbuj ograniczyć zakres zastępowania, kierując kod za pomocą document.getElementById lub podobny.

Aby zamienić wszystkie wystąpienia ciągu docelowego, użyj prostego wyrażenia regularnego z gflagą lobal:

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

1
nie działa dla mnie tutaj jest to, czego użyłem <script type="text/javascript"> window.onload = clear(); function clear() { document.body.innerHTML = document.body.replace('ü', 'n'); } </script>
Wahtever

Może być bardziej skomplikowane w przypadku rozszerzonych znaków - w jakim kodowaniu jest twój dokument? Czy na pewno znak to ü, a nie & # 252; na przykład..?
Dexter,

2
nie skopiowałeś mojego kodu dokładnie ;-) upewnij się, że masz innerHTML po obu stronach instrukcji, tj .: document.body.innerHTML = document.body.innerHTML.replace ('ü', 'n');
Dexter,

3
FYI - Błąd w pierwszym komentarzu: ustawiono window.onload = clear;bez nawiasów "()". Kiedy piszesz clear(), faktycznie wykonujesz funkcję, ale chcesz przypisać ją tylko do modułu obsługi ładowania
Philipp

1
Zauważ, że używanie innerHTML jest obecnie ogólnie uważane za złe: slideshare.net/x00mario/the-innerhtml-apocalypse
kufudo

13

Poniższa funkcja działa u mnie idealnie:

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

Oto przykład użycia:

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

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

Możesz również użyć do bezpośredniej wymiany, na przykład:

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

Ale bądź ostrożny, ponieważ może to wpłynąć również na tagi, css i skrypty.

EDYCJA: W przypadku czystego rozwiązania JavaScript użyj zamiast tego tej metody:

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

Jak można by zastąpić cały tekst w określonym tagu (np. <p> lub <span>) jakimś innym tekstem?
GJZ,

Po prostu dodaj nazwy tagów do pierwszego parametru wejściowego, np. ReplaceText ('p, span', 'hello', 'hi')
Ziad

To nie działa poprawnie. Rozważ to: <p> witaj <strong> świat </strong> </p>. witam nie zostanie zastąpiony.
David Vielhuber,

Cześć, jestem początkującym kodowaniem. Mogę zrobić coś dobrego z AppleScript. Ale to wszystko, co wiem. Czy możesz dać mi kilka rad, od czego zacząć? Moim celem jest używanie javascript do automatyzacji gromadzenia baz danych, obrazów, filmów, wypełniania formularzy internetowych, przesyłania, może być praca z programem Excel. Applescript jest w porządku, ale java wydaje się być zupełnie nowym poziomem io wiele lepszym. Od czego powinienem zacząć, aby osiągnąć swoje cele. Wiem 0 o javascript i nawet nie wiem, jak sprawić, by powyższy skrypt działał! Gdzie mam go wkleić? Dziękuję bardzo!
Duy Duy

12

Skończyło się na tej funkcji, aby bezpiecznie zastępować tekst bez skutków ubocznych (do tej pory):

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

To dla przypadków, w których 16kB findAndReplaceDOMTextjest trochę za ciężkie.


Cześć, jestem początkującym kodowaniem. Mogę zrobić coś dobrego z AppleScript. Ale to wszystko, co wiem. Czy możesz dać mi kilka rad, od czego zacząć? Moim celem jest używanie javascript do automatyzacji gromadzenia baz danych, obrazów, filmów, wypełniania formularzy internetowych, przesyłania, może być praca z programem Excel. Applescript jest w porządku, ale java wydaje się być zupełnie nowym poziomem io wiele lepszym. Od czego powinienem zacząć, aby osiągnąć swoje cele. Wiem 0 o javascript i nawet nie wiem, jak sprawić, by powyższy skrypt działał! Gdzie mam go wkleić? Dziękuję bardzo!
Duy Duy

Duy Duy, to dużo problemów. Biorąc pod uwagę sam opis zadania, jest to wystarczający powód, aby rzucić pracę.
funky-future

9

Miałem ten sam problem. Napisałem własną funkcję używając replace w innerHTML, ale zepsułoby to linki kotwiące i tym podobne.

Aby to działało poprawnie, użyłem biblioteki, aby to zrobić.

Biblioteka ma niesamowite API. Po dołączeniu skryptu nazwałem go tak:

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

To było jedyne rozwiązanie, które zadziałało w moim przypadku. Musiałem użyć REGEX, aby znaleźć i zamienić numery telefonów w całej witrynie, a inne odpowiedzi tutaj przerwałyby moje zdarzenia DOM.
DavyH

3

Próbowałem zastąpić naprawdę duży ciąg iz jakiegoś powodu wyrażenia regularne generowały błędy / wyjątki.

Więc znalazłem tę alternatywę dla wyrażeń regularnych, która również działa dość szybko. Przynajmniej było to dla mnie wystarczająco szybkie:

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

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

src: Jak zamienić wszystkie wystąpienia ciągu w JavaScript?


2

Użyj domyślnej funkcji zastępowania ciągów javascript

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

1

Spróbuj zastosować powyższe sugerowane rozwiązanie na dość dużym dokumencie, zastępując dość krótkie ciągi, które mogą być obecne w innerHTML lub nawet innerText, a Twój projekt HTML zostanie w najlepszym przypadku uszkodzony

Dlatego najpierw pobieram tylko elementy węzłów tekstowych za pośrednictwem węzłów HTML DOM, w ten sposób

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

`a następnie zastosowałem zamiennik na wszystkich z nich w cyklu


1

Chciałem dodać przykład do odpowiedzi funky-future, ponieważ ciągle otrzymywałem ten błąd:

Uncaught TypeError: element.childNodes is not iterable

użyj w ten sposób:

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

nie działało to dla mnie z selektorami jQuery.


1
Jeśli masz nowe pytanie, zadaj je, klikając przycisk Zadaj pytanie . Dołącz link do tego pytania, jeśli pomaga to w dostarczeniu kontekstu. - Z recenzji
SilverNak,

1
To nie jest nowe pytanie. Rozwijałem odpowiedź funky-future, podając przykład, który działa. musiałem opublikować nową odpowiedź bc brak przedstawiciela do komentowania jego.
Y Stroli

1

Czasami zmiana document.body.innerHTMLpowoduje uszkodzenie niektórych skryptów JS na stronie. Oto wersja, która zmienia tylko zawartość textelementów:

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

1

Podczas korzystania z innerHTML.replace będzie działać i jest dość szybkie, spowoduje to przerwanie stanu DOM. Możesz to powtórzyć, ustawiając „autofokus” w polu wejściowym, a następnie zmieniając innerHTML na body, utraci on ostrość.

Mniej destrukcyjne podejście to:

// retrives all childNodes of body
var childNodes = document.body.childNodes;

// start replacing
replaceInNodes(childNodes,"search","replace");

function replaceInNodes(nodes,search,replace){
    // iterate through all nodes
    for (var i = 0; i < nodes.length; i++) { 
            var curNode = nodes[i];
            // if the node has attributes, let us look at those
            // i.E. we want to change "John" in the input placeholder to "Peter" - <input type="text" value="John">
            if(curNode.attributes !== undefined){
                var curNodeAttributes = curNode.attributes;
                for (var ii = 0; ii < curNodeAttributes.length; ii++) {
                    // replace attribute values
                    curNodeAttributes[ii].nodeValue = curNodeAttributes[ii].nodeValue.replace(search, replace);
                }   
            }
            // It is a "TEXT_NODE"
            // i.E. <span>John</span>
            if(curNode.nodeType == 3){
                curNode.data = this.injectIntoString(curNode.data);
            }
            // It is a "ELEMENT_NODE", meaning we need to go deeper
            if(curNode.nodeType == 1){
                this.replaceInNodes(curNode.childNodes);
            }
        }
}

Więcej informacji można znaleźć tutaj: https://zgheb.com/i?v=blog&pl=71#12.11.2020_-_Unobstrusively_replace_text_with_JavaScript Uwaga: jestem autorem wspomnianego linku


0

Jestem nowy Javascripti właśnie zacząłem uczyć się tych umiejętności. Sprawdź, czy poniższa metoda jest przydatna do zamiany tekstu.

<script>

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

</script>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.