Измените все textNodes на странице

Question

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

Но когда я запускаю скрипт, вставив его в консоль, он каким-то образом добавляет этот текст в разные места случайным образом и странно заполняет страницу! Любая идея о том, где я делаю неправильно?

(function(el, string){ 
    var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false); 
    while(n=walk.nextNode()) n.nodeValue = string; 
}(document.body, 'abigfoxjumpedoveralazyfrogmultipletimes')); 

Answer 1

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

<div>**THERE IS AN EMPTY TEXT NODE HERE** 
    <span>Hi bob</span>**THERE IS AN EMPTY TEXT NODE HERE** 
</div> 

Ваш результат будет, таким образом

<div>abigfoxjumpedoveralazyfrogmultipletimes 
    <span>abigfoxjumpedoveralazyfrogmultipletimes</span>abigfoxjumpedoveralazyfrogmultipletimes 
</div> 

Чтобы избежать этого, тест на наличие любого не-белого пробела в текстовом узле:

while (n=walk.nextNode()) if (/\S/.test(n.nodeValue)) n.nodeValue = string; 
          ^^^^^^^^^^^^^^^^^^^^^^^^^^^ 

Answer 2

Ожидаете ли вы SHOW_TEXT, чтобы получить только видимый текст? Моя интуиция здесь заключается в том, что есть разрыв между тем, как вы ожидаете SHOW_TEXT для выбора и как это происходит.

К сожалению, документы MDN на этом отсутствуют в конкретных примерах.

Вот стек переполнения ответ, который мог бы объяснить, что происходит: What Is A Text Node, Its Uses? //document.createTextNode()

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