Главная » Вебмастеру » Как заменить текст на сайте (JavaScript)

Как заменить текст на сайте (JavaScript)

2017-06-15 / Вр:09:43 / просмотров: 19188

В сегодняшней своей статье я расскажу о полезной возможности замены фрагмента текста на сайте. Также этим способом можно заменить всего лишь одно или несколько слов в тексте.

Вы спросите, когда эта возможность может стать вам полезной? Вот, например, у вас на сайте есть предложение или слово, которое вы бы хотели заменить. Скажем, было «Контактные данные», а хотите «С нами можно связаться». Чтобы сделать замену, эту фразу нужно найти в коде, но для этого необходимо уметь разбираться в коде, а не каждый сайтовладелец умеет разбираться в коде.

Так вот, если кода сайта для вас – это непроходимые африканские джунгли, то с помощью этого метода вы самостоятельно сможете заменить любое слово или фразу на страницах сайта!

Весь секрет в маленьком скрипте на JavaScript, который может автоматически менять текст на сайте. Сразу замечу важный нюанс: если слово, подлежащее замене, в тексте встречается несколько раз, то скрипт сможет заменить только самое первое.

Пробуем.

Задача:
У меня есть текст:
Привет, читатели блога BlogGood.ru!
Мне нужно заменить слово «Привет» на «Здравствуйте» и «BlogGood.ru» на «StepkinBlog.ru».

Решение:
Воспользуемся вот таким JavaScript скриптом для замены текста:

<script ENGINE="text/javascript">
document.body.innerHTML = document.body.innerHTML.replace('Текст на сайте, который нужно заменить', 'Новый текст');
</script>

Настройки скрипта:
«Текст на сайте, который нужно заменить» - вставляем слово «Привет»
«Новый текст»- вставляем слово «Здравствуйте».

Скрипт нужно вставить внизу сайта.

Вот полный пример:

<html>
<head>
<title>Как заменить текст на сайте (JavaScript) - BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
Привет, читатели блога BlogGood.ru! <br>
Привет, читатели блога BlogGood.ru!

</body>
</html>
<script type="text/javascript">
document.body.innerHTML = document.body.innerHTML.replace('Привет', 'Здравствуйте');

document.body.innerHTML = document.body.innerHTML.replace('BlogGood.ru', 'StepkinBlog.ru');
</script>

Результат:

Здравствуйте, читатели блога StepkinBlog.ru!
Привет, читатели блога BlogGood.ru!

Если в тесте нужно заменить несколько слов на веб-странице, а не только самое первое, пропишите скрипт вот так:

<html>
<head>
<title>Как заменить текст на сайте (JavaScript) - BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
Привет, читатели блога BlogGood.ru! <br>
Привет, читатели блога BlogGood.ru!
</body>
</html>
<script type="text/javascript">
document.body.innerHTML = document.body.innerHTML.replace(/Привет/g, 'Здравствуйте');

document.body.innerHTML = document.body.innerHTML.replace(/BlogGood.ru/g, 'StepkinBlog.ru');
</script>

Результат:

Здравствуйте, читатели блога StepkinBlog.ru!
Здравствуйте, читатели блога StepkinBlog.ru!

Если вы затруднитесь найти элемент, который я добавил в скрипте, чтобы замена была на всей веб-странице, то пишите – я объясню. Вот такие чудеса умеет творить JavaScript!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Популярные статьи:

Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329815
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274370
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 220444
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186394
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 181504

3 Ответов на комментарий - Как заменить текст на сайте (JavaScript)

nesnayka

17.06.2017 в 22:20

Это все хорошо, вот только, если в коде сайта есть какой-то кусок JS, то он может никогда так и не выполниться.

Например:

<html>
<head>
<title>Как заменить текст на сайте (JavaScript) - BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
Привет, читатели блога BlogGood.ru! <br>
Привет, читатели блога BlogGood.ru! <br>
<button id="but1">button</button>
<script ENGINE="text/javascript">
document.getElementById("but1").onclick = function(){
	alert(1);
}

</script>
</body>
</html>
<script type="text/javascript">
document.body.innerHTML = document.body.innerHTML.replace('Привет', 'Здравствуйте');
 
document.body.innerHTML = document.body.innerHTML.replace('BlogGood.ru', 'StepkinBlog.ru');
</script>

обработчик onclick для кнопки.

Степан => автор блога

17.06.2017 в 22:52

Вот так можно сделать и все заработает:

<html>
<head>
<title>Как заменить текст на сайте (JavaScript) - BlogGood.ru</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
Привет, читатели блога BlogGood.ru! <br>
Привет, читатели блога BlogGood.ru! <br>
<button id="but1">button</button>

</body>
</html>
<script ENGINE="text/javascript">
document.body.innerHTML = document.body.innerHTML.replace('Привет', 'Здравствуйте');  
document.body.innerHTML = document.body.innerHTML.replace('BlogGood.ru', 'StepkinBlog.ru');
document.getElementById("but1").onclick = function(){
    alert(1);
}
</script>

nesnayka

17.06.2017 в 23:47

Во-первых, присваивание события может быть не одно и жестко привязано к порядку выполнения инструкций.

Во-вторых, противоречит вот этому:
“Чтобы сделать замену, … нужно найти в коде, но для этого необходимо уметь разбираться в коде”

И вообще, конструкция типа
```
body.innerHTML = foo
```
есть очень нехорошим решением для изменения текста.

Такое можно делать только в случае конкретного требования менять все содержимое внутри body. Для любых других изменений есть немеряно различных функций для работы с DOM. )