Содержание страницы
домикГлавная / Скрипты java и php / JS замена текста
js замена текстаПокажу на примере с исходным кодом, как с помощью JS можно при клике быстро сделать замену текста.
В представленном примере посредством JS текущий текст будет заменяться другим текстом.
Для этого я буду использовать подготовленный текст, кнопку, с помощью которой будет осуществляться замена, и скрипт JS.

Замена текущего текста.

Тестовый текущий текст.

html и jsCOPY
<p class="par">Тестовый текст</p> <button onclick="fu()" type="text">Заменить текст</button> <script> function fu(){ var par = document.querySelector('.par'); par.innerHTML = 'Замена текущего тестового текста'; } </script>
Если вы используете на сайте какой-то движок, и он не пропускает html запись вида onclick="fu()", то можно заменить текст js другим способом, назначив для кнопки свой класс.
html и jsCOPY
<p class="par">Тестовый текст</p> <button class="wer" type="text">Заменить текст</button> <script> document.querySelector('.wer').onclick = function(){ document.querySelector('.par').innerHTML = 'Замена текущего тестового текста'; } </script>
А если у вас уже подключена библиотека JQuery, то для замены текста запись в JS можно существенно сократить.
html и jsCOPY
<p class="par">Тестовый текст</p> <button class="wer" type="text">Заменить текст</button> <script> $('.wer').click (function(){ $('.par').text('Замена текущего тестового текста'); }); </script>
Вместо кнопки для замены текста JS можно использовать любой на ваш выбор элемент html, например ссылку.

Замена тега и текста.

В последнем примере покажу, как при клике можно заменить любой тег с его текстовым содержимым на другой тег и текст.
В скрипте JS я укажу найти на странице элемент с классом neo ( это будет <div> ), и затем заменить его на <p> с классом deo и с новой текстовой информацией.
Тестовый текущий текст в блоке <div>.
html и jsCOPY
<div class="neo">Тестовый текущий текст в блоке.</div> <button class="dod" type="text">Заменить текст</button> <script> var dod = document.querySelector('.dod'); var neo = document.querySelector('.neo'); dod.onclick = function(){ neo.outerHTML = '<p class="deo"><b>Новый тег с новым текстом.</b></p>'; dod.onclick = null; } </script>
Дата публикации: 20.04.2019
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!