Динамическая замена переменной в коде HTML при загрузке страницы

  • 354
   
Разделы

Я не претендую на право называться автором всей размещенной здесь информации, так как некоторые моменты были заимствованы в доступных источниках и немного переработаны для удобства пользования.


По возможности указываю ссылки на источники.


Копируйте, комментируйте, переделывайте, пользуйтесь. Кому не жалко, оставляйте ссылку на источник.

Частный вебмастер по разработке сайтов на 1С Битрикс и WordPress

В процессе ознакомления с VUE.JS и им подобными библиотеками, понравилась функция динамической подмены переменной на значение в HTML коде страницы.

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

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Замена переменной на странице</title>
</head>
<body>

<!-- Пример блока с переменной внутри -->
<div id="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, nihil, quaerat! Amet aspernatur cum doloremque
error explicabo harum illum, incidunt minima minus numquam omnis quam reiciendis sit vel vero! Blanditiis.
</p>
<p>
{{name}} ipsum dolor sit amet, consectetur adipisicing elit. Error, nihil, quaerat! Amet aspernatur cum doloremque
error explicabo harum illum, incidunt minima minus numquam omnis quam reiciendis sit vel vero! Blanditiis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, nihil, quaerat! Amet aspernatur cum doloremque
error explicabo harum illum, incidunt minima minus numquam omnis quam reiciendis sit vel vero! Blanditiis.
</p>
</div>

<script>
// Функция замены переменной на значение
function replaceWord(app, variable, replacement) {
let appElement = document.getElementById(app);

// Проверяем, что элемент найден
if (appElement) {
let appHtml = appElement.innerHTML; // получаем содержимое блока в виде HTML
variable = '{{' + variable + '}}'; // названию переменной добавляем {{}}
let newHtml = appHtml.replace(new RegExp(variable, 'g'), replacement); // код с замененным словом
appElement.innerHTML = newHtml; // меняем содержимое блока
}
}

// Пример использования
// replaceWord('ид блока с переменной', 'название переменной', 'Значение переменной');
replaceWord('text', 'name', 'Переменная');
</script>
</body>
</html>

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

Путем замены переменных на конкретные значения, скрипт способствует созданию персонализированных пользовательских интерфейсов и адаптации контента под различные группы пользователей.

Позволяет легко адаптировать ключевые слова и фразы внутри контента, что способствует улучшению показателей поисковой оптимизации (SEO) и повышению видимости в поисковых системах.

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

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

Комментарии

Комментарий отправлены на валидацию!

Теги: