刪除文本時保留DOM元素的位置

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），並將它們顯示為單擊/移動熱圖。

限制

我無法更改目標網頁上的字體或代碼，並且每個元素和頁面的每個元素可能使用不同的字體。

想法？

是否有人可以尋求幫助？ 這里的問題是-字符寬度與實際文本中使用的字符不同。

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演示