Dzisiaj chciałbym wam pokazać jak szybko podmienić dany tekst na stronie za pomocą JavaScript. Skrypt ten może być używany jako tzw. wytrych, czyli skrypt którego stosowanie nie do końca jest eleganckie z programistycznego punktu widzenia ale najczęściej jest najtańszym i najszybszym osiągnięciem celu.

Podmiana tekstu w ten sposób przypomina znaną z edytorów tekstu funkcję Zamień na lub Zamień wszystkie czyli Replace withReplace all.

Oto nasz przykładowy kod:

function podmien(dopodmiany, podmiana) {
    document.body.innerHTML = document.body.innerHTML.replace(dopodmiany, podmiana);
}

Na koniec wystarczy wywołać funkcję po wystąpieniu treści, którą chcemy podmienić. A więc…

podmien('stary tekst', 'nowy tekst');

Chcąc podmienić wszystkie wystąpienia tekstu, umieśćmy skrypt na samym końcu strony. Można dokonywać manipulacji w całych serwisach internetowych – umieszczamy skrypt w nagłówku.

Jeżeli treść na stronie interntowej jest generowana dynamicznie, warto odczekać z podmianą do momentu załadowania się wszystkich elementów na stronie. Służy do tego funkcja:

document.addEventListener('DOMContentLoaded', function() {
  /* Tutaj wywołujemy funkcję podmien()... */
});

Podmiana tekstu bezpośrednio na stronie za pomocą JavaScript

Pamiętaj, że wszelki kod JavaScript możesz wprowadzać bezpośrednio do konsoli w przeglądarce. Sprawdźmy czy zamieszczony w tutorialu kod działa:

Podmiana tekstu JavaScript – Test

Zastosowanie

Zastosowanie? Cóż… wyobraźmy sobie ładowany z zewnątrz skrypt formularza, który wyświetla etykiety, które nie do końca nam się podobają. Osobiście skorzystałem z takiego rozwiązania przy chęci przetłumaczenia wtyczki która ładowała jakieś zasoby z zewnątrz.

Załóżmy, że chcemy szybko edytować stronę a nie mamy hasła do admina a tylko dostęp do plików szablonu. Często zdarzało mi się w ramach przysługi stałym klientom edytować stare strony, które miały być wkrótce zaktualizowane… Wiadomo, takie rozwiązania jest lepiej stosować tymczasowo w ramach „łatki”.

Oceń artykuł na temat: Podmiana tekstu JavaScript
Średnia : 4.4 , Maksymalnie : 5 , Głosów : 21