Question

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

背景

我的项目从敏感的网页捕获了网页的完整源代码，但是，这些敏感数据没有关系，需要先删除，然后再传输到服务器。捕获的源代码将稍后用于重新创建管理员看到的内容（无文本）

示例

假设这是一个页面：

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

因此它将通过浏览器呈现为：

此处一些文本[其他一些文本]更多文本

我需要这样：

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

当前的越野车方法

当前，我获得DOM中的文本，计算每个空格之间的字符，并用破折号替换这些字符。不幸的是，它将呈现如下：

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

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

目的

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

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

限制

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

想法？

是否有人可以寻求帮助？这里的问题是-字符宽度与真实文本中使用的字符不同。

我已经考虑过在所有句子中加扰单词，以保留文本的最终总宽度。但是，某些人也许可以将其改组为原始单词，这是安全/隐私风险。
我已经考虑过根据每个单词的大小替换多个破折号（并且当前使用它），但是如何获取指定DOM元素中每个单词的大小？（因为每个DOM元素可能使用不同的字体，因此每个字符的大小不同），并且尝试在每个元素及其文本旁边创建一个隐藏的div来尝试计算其文本宽度时，可能会遇到很大的性能问题。
，获取字体大小，字体系列和字母间距的计算样式，并在新的div中使用它来检测该字体的空间宽度。然后将原始文本放在该div上并检测原始文本的宽度。然后将该字体的原始文本宽度除以空格宽度，以检测需要多少个空格才能生成相同的宽度，然后生成这些空格。这里的问题是，在某些文本太多的页面上，这将对浏览器的性能产生过大的影响。
您的想法？

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

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

1 个答案: