BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

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

Пробуем.

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

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

<script type="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!

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

Получай обновления блога!!! Подпишись:

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

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

  1. nesnayka

    Это все хорошо, вот только, если в коде сайта есть какой-то кусок 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 type="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 для кнопки.

    Ответить

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

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

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

    <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 type="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 отвечает:

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

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

    И вообще, конструкция типа

    body.innerHTML = foo

    есть очень нехорошим решением для изменения текста.

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

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 761
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4183