Замена текстового содержимого в HTML таблице на JS

Быстрый ответ

Полезный совет: для замены текста на HTML-странице используйте метод JavaScript replace() в сочетании с textContent или innerText. Этот подход позволяет изменить текст, не затрагивая структуру DOM:

document.body.textContent = document.body.textContent.replace(/старыйТекст/g, 'новыйТекст');

Флаг /g обеспечивает замену каждого вхождения. Такой метод предпочтительнее манипуляций с innerHTML, так как они могут нарушать работу скриптов или обработчиков событий.

Безопасная замена текста

Иногда работа с DOM сравнима с игрой в "дженгу": одно неправильное изменение может разрушить тщательно построенную архитектуру вашего кода. Метод replace() JavaScript в комбинации с регулярными выражениями помогает избежать этого.

Точечные замены в сложных структурах

Если структура вашего DOM больше похожа на густой лес, а не на небольшой огород, используйте querySelectorAll для выбора конкретных элементов:

// Выбираем конкретные элементы, избегая нежелательных изменений
document.querySelectorAll('table td').forEach(function(td) {
  td.textContent = td.textContent.replace(/старыйТекст/g, 'новыйТекст');
});

Подробнее об этом расскажет наш спикер на видео

Рекурсия для работы с вложенными элементами

Навигация по DOM может быть сложной и запутанной. Однако с помощью рекурсии можно легко перемещаться по сложной структуре:

// Точно как в знаменитом фильме "Начало", только в мире кода
function replaceText(node, searchRegex, replaceString) {
  if (node.nodeType === 3) { // текстовый узел
    node.nodeValue = node.nodeValue.replace(searchRegex, replaceString);
  } else {
    node.childNodes.forEach(child => replaceText(child, searchRegex, replaceString));
  }
}
replaceText(document.body, /старыйТекст/g, 'новыйТекст');

Защита функциональности ссылок

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

Использование вспомогательных библиотек

Библиотека findAndReplaceDOMText будет вам полезна для выполнения сложных замен текста. Она основана на регулярных выражениях и аккуратно взаимодействует с вашим DOM:

findAndReplaceDOMText(document.body, {
  find: /старыйТекст/g,
  replace: 'новыйТекст'
});

Фокус на производительности

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

Визуализация

Представьте текст на веб-странице как волшебный сад (🏡🌼). Цветы в этом саду – это слова, и мы хотим заменить один вид цветов на другой:

До: [🌼, 🌻, 🌼, 🌸, 🌺]
После: [🌷, 🌻, 🌷, 🌸, 🌺]

<script>
// Просто и элегантно – ваш сад стал ярче!
document.body.innerHTML = document.body.innerHTML.replace(/🌼/g, '🌷');
</script>

Итак, ваш сад расцвёл новыми красками! 🏡🌷

Защитите ваши скрипты и стили

Когда вы заменяете текст, важно не затрагивать содержимое тегов <script> и <style>:

// Защита скриптов и стилей
function isSafeNode(node) {
  return !(/SCRIPT|STYLE/.test(node.parentNode.tagName));
}

// Защита важнее всего
function replaceSafeText(node, searchRegex, replaceString) {
  if (node.nodeType === 3 && isSafeNode(node)) { // текстовый узел
    node.nodeValue = node.nodeValue.replace(searchRegex, replaceString);
  } else {
    node.childNodes.forEach(child => replaceSafeText(child, searchRegex, replaceString));
  }
}
replaceSafeText(document.body, /старыйТекст/g, 'новыйТекст');

Запускайте замену в правильное время

Ожидайте полной загрузки документа перед началом замены текста, чтобы обеспечить плавную работу с DOM:

// Ничего не спешите; ждите своего момента
document.addEventListener('DOMContentLoaded', function() {
  replaceSafeText(document.body, /старыйТекст/g, 'новыйТекст');
});

Полезные материалы

1. Основные аспекты работы с DOM – Веб-API | MDN
2. Примеры использования метода String replace() в JavaScript
3. Замена слов в теле текста – Архив Stack Overflow
4. Руководство по изменению содержимого веб-страницы
5. Пояснение textContent – Веб-API | MDN
6. Руководство по работе с DOM HTML
7. Руководство по свойству textContent элемента