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

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 . Это может решить вашу проблему, или, возможно, вы могли бы адаптировать этот подход в соответствии со своими потребностями.

Answer 2

Возможно, у вас недостаточно места в букмарклете, чтобы включить 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. Затем выполните итерацию цикла for для всех дочерних элементов element (если он есть) и вызовите traverse() для каждого из них. С функцией traverse(), реализованной рекурсивно, как это, вам нужно будет вызвать ее только один раз: traverse(document.body);

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

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

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