javascript - 删除文本时保留 DOM 元素位置

Question

我正在寻找一种解决方案，可以在所有 DOM 元素的位置保持不变的情况下删除 DOM 中的文本(或用某些字符替换文本)。

背景

我的元素从敏感网页捕获网页的完整源代码，但是，这些敏感数据无关紧要，需要在传输到服务器之前删除。捕获的源代码稍后将用于重新创建管理员看到的内容(没有文本)

示例

假设这是一个页面:

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

所以它会被浏览器渲染成这样:

这里有一些文字[一些其他文字]一些文字

我需要它是这样的:

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

当前的 buggy 方法

目前，我在 DOM 中获取文本，计算每个空格之间的字符数，并将这些字符替换为破折号。不幸的是，它将呈现如下:

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

如你所见，按钮和链接的位置与原来的完全不同。

目的

主要目的是稍后为 UX 目的重新创建 DOM，但不会将任何文本传输到可能包含敏感信息的服务器。文本可以完全删除，替换为任何字符(我在本例中使用过)，替换为其他文本，例如“Lorem ipsum”，只要它从源代码中完全删除，同时保留 DOM 的确切位置。

它用于记录鼠标点击和鼠标移动位置(X，Y)并将它们显示为点击/移动热图。

限制

我无法更改目标网页上的字体或代码，并且每个元素和页面可能为每个元素使用不同的字体。

想法？

如果有人对此有想法，是否正在寻求帮助？这里的问题是 - 字符宽度与实际文本中使用的字符不同。

1. 我想到了在所有句子中打乱单词以保留文本的最终总宽度。但是，有人可能能够将它们重新组合成原始单词，这是一种安全/隐私风险。

2. 我考虑过根据每个单词的大小用多个破折号替换(目前正在使用)，但是如何在指定的 DOM 元素中获取每个单词的大小？ (因为每个 DOM 元素可能使用不同的字体，因此每个字符的大小不同)并且尝试在每个元素旁边创建一个隐藏的 div 及其文本只是为了尝试计算它的文本宽度可能会有很大的性能问题。

3. 在上面有文本的父元素上，获取字体大小、字体系列和字母间距的计算样式，并在新的 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 Demo