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 with i Replace 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:
Zmiana tekstu po kliknięciu
JavaScript pozwala wykonać praktycznie każdą modyfikację, którą możesz sobie wyobrazić. W kursie JavaScript od podstaw pokazałem jak zmienić tekst przycisku po kliknięciu na nim. Przykład znajduje się w dwunastym rozdziale o DOM i obsłudze zdarzeń.
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”.
