Question

我需要一个JavaScript函数，它遍历属于特定类的页面的所有元素，并随机替换为“X”百分比的字符。这个想法是通过不同程度来模糊信息。消息越模糊，解密就越具有挑战性。

我刚刚开始尝试使用getElementById的单个元素，但是已经使用行* s [i] ='_'; *而卡在那里。除了替换特定字符的这个问题之外，我实际上需要对属于特定类成员的每个段落执行该函数...而不仅仅是一个id元素。

编辑：我的方法存在问题：特殊字符如＆amp; amp; amp; 。但是，这对我的使用来说是一个小问题，我可以接受它开始。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script type="text/javascript">
        function obscure(percent){
            var s = document.getElementById('change').innerHTML;
            var i;
            for(i=0; i<s.length;i++){
                 //return a random integer between 0 and 100
                 var rand = Math.floor(Math.random()*(percent+1)));
                     if(rand < percent){
                         s[i]='_';
                     }
            }
            document.getElementById('change').innerHTML = s;
        }
    </script>
</head>
<body>
    <a onclick="obscure(50)">obscure</a>
    <p id="change">
        To be, or not to be: that is the question:
        Whether 'tis nobler ...
    </p>
</body>
</html>

Answer 1

function obscure(percent){
   var s = document.getElementById('change').innerHTML;
   for(var i=0; i < s.length; i++){
     if(Math.floor(Math.random()*100) < percent){
        s = s.substr(0,i-1) + '_' + s.substr(i+1);
     }
   }
   document.getElementById('change').innerHTML = s;
}

你的字符串赋值不起作用（你不能改变js字符串中的单个字符，因为它们在幕后是不可变的），你的条件也不准确（你想从1创建一个随机数） - 100因此你随机部分乘以100）。

至于遍历某个类的所有元素，我建议你使用js库。我是一个jQuery人，但那里有很多！

Answer 2

不破坏DOM-2＆amp;的代码+事件：

function obscure( element, percent ) {
    if ( percent > 100 ) {
        throw new Error( "percent can't be over 100!" );
    }
    // Prepare
    var _ = "_",
    alreadyChanged = [ ],
    character,
    i,
    j,
    innerText = "",
    innerTextLength,
    getTextNodes = function ( textNodes, textNodesLength, parentNode ) {
        var index,
        length,
        node,
        nodes = parentNode.childNodes,
        nodeValue,
        tagName,
        i = nodes.length;
        while ( i-- ) {
            node = nodes[ i ];
            if ( node.nodeType === 1 ) { // Element
                tagName = node.tagName;
                if ( tagName !== "SCRIPT" && tagName !== "NOSCRIPT" ) {
                    getTextNodes( textNodes, textNodesLength, node );
                }
            } else if ( node.nodeType === 3 ) { // Text
                nodeValue = node.nodeValue;
                if ( nodeValue.search( /\S/ ) !== -1 ) {
                    textNodes.push( node );
                    textNodesLength.push( nodeValue.length );
                    innerText += nodeValue;
                }
            }
        }
    },
    max,
    random = function ( max ) {
        return Math.floor( Math.random( ) * ( max + 1 ) );
    },
    textNodes = [ ],
    textNodesLength = [ ];

    // Get all textNodes
    getTextNodes( textNodes, textNodesLength, element );
    innerTextLength = innerText.length;

    // Get rid all all characters that are already the one we might change to
    j = 0;
    while ( ( i = innerText.indexOf( _, i + 1 ) ) !== -1 ) {
        alreadyChanged[ i ] = true;
        ++j;
    }

    // Change the content
    i = Math.round( ( percent / 100 ) * innerTextLength );
    if ( i + j > innerTextLength ) {
        i = innerTextLength - j;
    }
    max = innerTextLength - 1;
    while ( i-- ) {
        do {
            j = random( max );
        } while ( alreadyChanged[ j ] );
        alreadyChanged[ j ] = true;
        innerText = innerText.substring( 0, j - 1 ) + _ + innerText.substring( j );
    }

    // Replace textNodes' content
    i = textNodes.length;
    index = innerText.length;
    while( i-- ) {
        length = textNodesLength[ i ];
        index -= length;
        textNodes[ i ].nodeValue = innerText.substr( index, length );
    }

}
// Example
obscure( document.body, 10 );

Answer 3

由于您将 Math.random（）乘以％+ 1 ，因此您可以保证 rand 小于<强>百分比即可。因此，整个字符串将是下划线。

相反，设置rand就像这样：

var rand = Math.floor( Math.random() * 100 );

至于按类选择元素，我建议使用jQuery。它有一个很好的语法来使用CSS获取元素。例如，您可以在jQuery中获取具有特定类的所有段落，如下所示：

for ( var paragraphToObscure in $( "p.someClass" )) {
    // Do your obscuring code in here on paragraphToObscure...
}

someClass 是您在每个＆lt; p＆gt; 元素上寻找的CSS类。

您可以从此处下载jQuery JavaScript文件：jQuery JavaScript files

Answer 4

使用jQuery，您可以轻松地使用类识别所有元素：

$("#obscure50").click( function () {
    var percent = 50;
    $(".classToObscure").each( function () {
                var s = $(this).html();
                var i;
                for(i=0; i<s.length;i++){
                 //return a random integer between 0 and 100
                var rand = Math.floor(Math.random()*(percent+1)));
                    if(rand < percent){
                        s[i]='_';
                    }
                }
                $(this).html(s);
    });
});
....

<a href="#" id="obscure50">obscure</a>

Answer 5

您的Math.floor()行还有一个额外的结束父母。 JavaScript错误控制台是您的朋友。 enter image description here

Answer 6

这是我对它的尝试，希望它可以在一个类的所有元素上运行。我不知道getElementByClassNames有多少支持，所以我也建议你查看jQuery或其他库。

http://jsfiddle.net/nickywaites/Taf4n/

我已经汇总了另一个使用http://www.broofa.com/Tools/JSLitmus/

向您展示一些效果指标的演示

看看http://jsfiddle.net/nickywaites/Taf4n/5/

var percent = 50;
var obscure = document.getElementsByClassName('obscure');
for (i = 0; i < obscure.length; i++) {
    var element = obscure[i];
    var text = element.innerHTML;
    var str = "";
    for (j = 0; j < text.length; j++) {
        //return a random integer between 0 and 100
        var rand = Math.floor(Math.random() * (100));
        if (rand < percent) {
            //Can't Change a String element directly               
            //https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String
            str = str + '_';
        } else {
            str = str + text[j];
        }
    }
    var x = str;
}

随机替换x％字母的JavaScript函数

6 个答案: