В процессе ознакомления с 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) и повышению видимости в поисковых системах.
С использованием скрипта, веб-разработчики могут моментально изменять информацию на веб-страницах, что полезно для обновления акционных предложений, уведомлений и других динамических данных.
Возможность проведения изменений на стороне клиента без перезагрузки страницы позволяет сэкономить ресурсы сервера и улучшить отзывчивость веб-приложения.
Комментарии