Как создать букмарклет, чтобы изменить весь текст на веб-сайте на другой текст с аналогичной длиной?

Question

Я хотел бы создать букмарклет javascript, который обменивает весь текст на любом веб-сайте (или большинстве текстов на большинстве сайтов) на другую строку одинаковой длины, сохраняя при этом форматирование сайта.

Подумайте о замене всего текста на nytimes.com слоем «Lorem Ipsum» без существенного изменения длины текста.

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

Содержание как это:

<h2>Police Are Using Phone Tracking as a Routine Tool</h2> 
<p class="author">By <span class="name">Eric Lichtblau</span></p> 
<p>Law enforcement tracking of cellphones is a convenient surveillance tool in many situations, but it is unclear if using such technology without a warrant violates the Constitution.</p> 

будет изменен в этом:

<h2>Lorem ipsum dolor sit amet, consectetur adipisicing</h2> 
<p class="author">Sed <span class="name">Consectetur Adipisicing</span></p> 
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. Duis aute irure dolor in reprehenderit in voluptate velit.</p> 

Текст, который используется для замены исходного контента будет предопределен.

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

Я благодарен за любые указатели и с удовольствием рисую материал для себя.

Answer 1

У вас, вероятно, недостаточно места в букмаркете, чтобы включить Lorem Ipsum в качестве строкового литерала. Я бы предложил сохранить Lorem Ipsum в txt-файле на каком-то сервере, а затем запросить его с помощью Ajax. Когда приходит ответ, сохраните его в строковой переменной s и инициализируйте целое число i = 0, мы будем использовать его для итерации по этой строке.

Затем перейдите к дереву DOM веб-страницы. Всякий раз, когда вы сталкиваетесь с текстовым узлом, сделайте следующее: Измерьте его длину (назовем его len). Затем замените текст в этом узле на s.slice(i, i + len), то есть точно len символов из Lorem Ipsum, хранящихся в строке s. Поэтому текст заменяется частью Lorem Ipsum той же длины. Наконец, увеличьте итератор: i += len, потому что мы не хотим заменять каждый текстовый узел той же частью.

Когда i превышает s.length, просто повторно инициализируйте его до 0.

Обход дерева DOM может быть реализован с помощью рекурсивной функции. Назовем это traverse(element). Функция будет проверять, содержит ли текст element текст - если да, замените его на Lorem Ipsum. Затем итерации в течение цикла через всех детей element (если они есть) и вызовите traverse() для каждого из них. С traverse() функции реализована рекурсивно, как это, вы будете иметь только назвать его однажды: traverse(document.body);

Наконец, если вам нужны некоторые учебники:

AJAX Основы: http://www.w3schools.com/ajax/default.asp (и последующими главы)

DOM дерево : http://www.w3schools.com/htmldom/default.asp (и следующие главы)

Answer 2

Существует bookmarklet that replaces all the text on the page with Lorem Ipsum. Это может решить вашу проблему, или, может быть, вы сможете адаптировать этот подход в соответствии с вашими потребностями.