В одной из статей я уже как-то рассказывал о возможности скрыть текст. Опция весьма полезная, если скажем у нас есть значительный объем текста в виде справочной информации. Кто-то захочет его прочитать, кто-то не будет. Однако возможность его вывести есть и есть возможность не читать его. Все это здорово интерактивно и все в таком духе.
На самом деле я не зря здесь провел подобную аналогию, так как в этой статье будет нечто похожее, но реализовано по-другому. Если первоначально описанный мною вариант заключался в подмене стилей, с чем Ява скрипт справляется на ура, то в этом случае будет происходит содержимого HTML прямо на странице. В итоге, можно получить тот же самый результат, если скажем какую-то фразу, знак,символ, слово, просто подменить на целый абзац или наоборот.
Об основных принципах работы скрипта я уже замолвил пару слов. Осталось разобраться в нюансах.
Итак, у нас есть какой-либо текст на странице. Именно его мы будет заменять или удалять, это уж как вам удобно и какое условие вы пропишите. Ведь вместо слова или текст может стоять и вовсе пустой пробел, что и будет тоже самое, что удаление.
Активация подмены может происходить по одному из известных вам сценариев, скажем вы нажмете на кнопку и тем самым сработает функция или это будет загрузка полной страницы или это будет пролистывание страницы, это опять же я не знаю. В моем случае это пусть будет кнопка и второй случай это полная загрузка страницы, то есть все произойдет автоматически после загрузки страницы.
А произойдет следующее, согласно оператора document.body.innerHTML = document.body.innerHTML.replace(/Что-то, что будем менять/g, 'Заменено'); произойдет поиск "Что-то, что будем менять", то есть того что стоит между /.../ и поменяется на то, что стоит в скобках '...'.
Все давайте теперь смотреть пример и код по порядку, так как сказано было достаточно.
ПРИМЕР
и второй вариант
Как всегда осталось сказать о том, что как вы собираетесь использовать этот скрипт, это ваше дело, но есть одно НО!
* - так как поиск слова происходит по всей страницы, то имейте ввиду, что будут меняться все слова, фразы, буквы и символы на всей странице. Если вам надо заменить текст лишь в одном блоке, то в помощь вам getElementById вместо body, ну и прописать id для функции и блока.
Альтернативная информация (тоже самое другими словами)
Не знаю в каких, но видимо существуют такие случаи, когда есть необходимость подмены одного содержимого другим. В принципе если пофантазировать, то можно что-то придумать, но не об этом в настоящей статье.
Речь пойдет о принципе реализации, а не о самом факте подмены. Реализовывать все это исходя из наименования статьи будем с помощью Java Script. Благо в его функционал практически в самом примитивном уровне уже вшит такой оператор, то есть ничего не придется выдумывать, разве что использовать его так и там, где нам надо. Начнем.
Оператор подмены Java Script (replace)
Сам оператор использует весьма распространенную конструкцию вывода данных document.body.innerHTML, разве что в конце добавляется replace (замена). Вот так все записывается.
document.body.innerHTML.replace(/что меняем/g, 'на что меняем');
Теперь самое время привести код целиком и попробовать его в действии.
Код Java Script для подмены HTML
В качестве критерия срабатывания кода можно взять оператор загрузки страницы, который и будет активировать функция, скажем так window.onload=function(){... в моем же случае я буду использовать кнопку, которая также будет активировать функцию. Ведь если использовать сразу для подмену после загрузки страницы, то мало кто что поймет, как происходил процесс подмены. Хотя все это мелочи, ведь можно использовать подмену для конкретного блока, а не для всей страницы. В общем здесь вариантов много и это все детали.
Итак, в моем случае пусть буква а меняется на б
Теперь же и сам код, как это все реализовано.
* - если вместо g поставить y, то подмена будет лишь для первого знака (значения), все остальные останутся без подмены.
На этом можно и откланяться, хотя как я уже сказал, частных случаев может быть великое множество.
Еще одно НО, если необходимо менять не на всей странице, а лишь в нужном блоке, скажем это блок m, то используем следующую конструкцию: document.getElementById("m").innerHTML = document.getElementById("m").innerHTML.replace(/.../g, '...');