Сохранить положение элементов DOM при удалении текстов

Question

Я ищу решение, в котором я могу удалить тексты (или заменить тексты с некоторыми символами) в DOM, где положение всех элементов DOM остается неизменным.

Фон

Мой проект захватывает полный исходный код веб-страниц с конфиденциальных веб-страниц, однако эти конфиденциальные данные не имеют значения и должны быть удалены перед передачей на сервер.Захваченный исходный код будет позже использован для воссоздания того, что видел Администратор (без текстов)

Пример

Предположим, что это страница:

<div>Some text here
 <input type="button" value="some other text" />
 <a href="#">some more text</a>
</div>

Таким образом, он будет отображаться в браузере следующим образом:

некоторый текст здесь [другой текст] еще немного текста

Мне нужно, чтобы он был таким:

----- ------ ------ [------- ------ ------] ------- ------- ------

Текущий подход с ошибками

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

---- ---- --- [---- ----- ----] ---- -----

Что, как вы можете видеть, положение кнопки и ссылки полностью отличается от оригинала.

Назначение

Основное назначение -позднее воссоздать DOM для целей UX, но без каких-либо текстов, передаваемых на сервер, которые могут содержать конфиденциальную информацию.Тексты могут быть полностью удалены, заменены любыми символами (я использовал - в этом примере), заменены другими текстами, такими как «Lorem ipsum», при условии, что он полностью удален из исходного кода при сохранении точного местоположения DOM.

Используется для записи положения щелчка мыши и перемещения мыши (X, Y) и отображения их в виде тепловой карты щелчка / перемещения.

Ограничения

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

Идеи?

Lookingза помощью, если кто-нибудь может придумать идею об этом?Проблема в том, что ширина символов отличается от ширины символов, используемых в реальном тексте.

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

2. Я думал о замене несколькими черточками в зависимости от размера каждого слова (и использованиемэто в настоящее время), но как получить размер каждого слова в указанном элементе DOM?(поскольку в каждом элементе DOM может использоваться разный шрифт, следовательно, разный размер для каждого символа), и может возникнуть большая проблема с производительностью при попытке создать скрытый div рядом с каждым элементом с их текстами, просто чтобы попытаться вычислить его ширину текста.

3. на родительском элементе, на котором есть текст, получите вычисляемый стиль для font-size, font-family и letter-spacing и используйте его в новом div для определения ширины этого шрифта для пробела.затем поместите оригинальный текст в этот div и определите ширину исходного текста.затем разделите исходную ширину текста на ширину пространства для этого шрифта, чтобы определить, сколько места должно быть там, чтобы создать такую ​​же ширину, и сгенерировать эти пробелы.Проблема заключается в том, что на некоторых страницах, которые содержат слишком много текста, это будет избыточным для производительности браузера.

4. Ваша идея?

Answer 1

Попробуйте с этим:

// Select 'div','a' and 'input' elements.
// you can add more elements or even select all '*' 
$('div,a,input').each(function() {
    var contents = $(this).contents();
    if (contents.length > 0) {
        if (contents.get(0).nodeType == Node.TEXT_NODE) {
            // Remove text from children nodes
            var elementText = $(this)
                .clone()    //clone the element
                .children() //select all the children
                .remove()   //remove all the children
                .end()  //again go back to selected element
                .text();
            // Replace text
            $(this).text(elementText.replace(/[a-zA-Z0-9]{1}/g, '-')).append(contents.slice(1));
        }
    }  
    // From input tags we will replace value
    if($(this).is('input'))
            $(this).val($(this).val().replace(/[a-zA-Z0-9]{1}/g, '-'));


});

Вот демоверсия JSFiddle