Как в js изменить текст элементу и всем его дочерним элементам?
Нужно чтобы при нажатии на кнопку все слова на странице заменились на одно случайное слово из этих: "1","2","3". То есть каждое слово на странице должно замениться на одно случайное из этого списка
Ответы (1 шт):
Эта задача решается с помощью поиска на странице (или в элементе) всего текста. В HTML существует тип нод TEXT_NODE который и представляет из себя текстовые ноды для того чтобы их отыскать существует метод документа createTreeWalker. Я не буду писать о том как привязать событие к кнопке или как сгенерировать число от 1 до 3 — это базовые вещи. Что касается простой демонстрации приведу такой скрипт:
const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT)
while(walker.nextNode()) {
walker.currentNode.data = walker.currentNode.data.replace(/\S+/g, 1)
}
Метод nextNode служит для перехода к следующей ноде иначе возвращает null поэтому его можно использовать в условии цикла. Для замены содержимого ноды используем свойство data. Далее используется регулярка /\S+/g — буквально обозначающая поиск всех (g) непрерывных непробельных последовательностей (таким образом выбираются русские слова и слова и числа на любых других языка кроме тех что пишуться латиницей)
Демонстрация для этой страницы:
