Javascript 如何随机更改HTML文档正文中的每个字符？ 第一条

你好，世界

随机文本 函数changeContents（）{ var contents=document.getElementById（“contents”）.innerText； var newContents=“”； var alphabet=“abcdefghijklmnopqrstuvxyz”； var upperAlphabet=“abcdefghijklmnopqrstuvxyz”； var number=“0123456789”； 函数isLower（字符）{

---

return character>=“a”&&character=“a”&&character=“0”&&character这应该可以使用api快速查找所有文本节点：

编辑：添加了重置示例。 编辑：不在字母表中的排除字符

函数getAllTextNodes（节点）{ var currentNode，nodes=[]； var treeWalker=document.createTreeWalker（节点，NodeFilter.SHOW_TEXT， {acceptNode:函数（节点）{ if（/\S/.test（node.data））返回NodeFilter.FILTER\u ACCEPT； }}，假）； while（currentNode=treeWalker.nextNode（））nodes.push（currentNode）； 返回节点； } 函数索引（数组）{ 返回Math.floor（Math.random（）*array.length）； } 函数createRandomChar（char）{ var lower=“abcdefghijklmnopqrstuvxyz”； var upper=“abcdefghijklmnopqrstuvxyz”； var number=“0123456789”； if（（下+上+数字）.indexOf（char）<0）返回char； if（！isNaN（parseInt（char）））返回编号[随机索引（编号）]； if（char==char.toLowerCase（））返回lower[randomIndex（lower）]； if（char===char.toUpperCase（））返回upper[randomIndex（upper）]； 返回字符； } 函数随机性内容（选择器）{ var元素=document.querySelector（选择器）； var textNodes=getAllTextNodes（元素）； forEach（函数（节点）{ node.textContent=node.textContent.split（“”）.map（函数（字符）{ 返回createRandomChar（char）； }).加入（“”）； }); } //示例代码 功能重置（节点、原始节点）{ forEach（函数（节点，索引）{ node.textContent=originalNodes[index]&&originalNodes[index].textContent }); } var contentSelector='#contents'； var contentElement=document.querySelector（contentSelector）； var originalNodes=getAllTextNodes（contentElement）.map（函数（节点）{ 返回node.cloneNode（）； }); document.querySelector（“#randomText”）.addEventListener（'click'，函数（e）{ randomizeContent（contentSelector）； }); document.querySelector（“#resetRandomText”）.addEventListener（'click'，函数（e）{ 重置（getAllTextNodes（contentElement），原始节点）； })；

第一条
你好，世界







一种美妙的宁静占据了我的整个灵魂，就像这些我全心全意享受的春天的甜美早晨。我独自一人，在这个地方感受到存在的魅力，它是为我这样的灵魂的幸福而创造的。我是如此快乐，我亲爱的朋友，如此专注于纯粹宁静存在的美妙感觉，以至于我忽略了这不是我的才能。

随机文本
重置

（函数（）{
var chars=“0123456789abcdefghijklmnopqrstuvxyzabcdefghijklmnopqrstuvxyz”；
var unfiltered_nodes=document.queryselectoral（“#contents*”）；
var nodes=[].filter.call（未过滤的_节点，函数（n）{return！n.childrence.length；}）；
var btn=document.querySelector（“#randomText”）；
btn.onclick=随机化；
函数随机化（）{
对于（var i=nodes.length-1；i>-1；i--）{
var word=nodes[i].innerText；
对于（var j=word.length-1；j>-1；j--）{
var random_char=getRandomChar（）；
word=word.replace（word[j]，随机字符）；
}
节点[i].innerText=word；
}    
}
函数getRandomChar（）{
var len=字符长度-1；
var index=Math.floor（Math.random（）*（len））；
返回字符[索引]；
}
})（）；

JS-Bin
第一条
你好，世界






随机文本

您的代码不尊重空格、换行符和点字。如果需要，可以很容易地将其添加到chars字符串中。而且它不像您那样使用疯狂的api overkill，它既短又简单。您想将答案扩展到库中吗？lolI不知道Treewalker api是一个overkill。这是一种在DOM中循环的好方法。dude你需要一个api来管理一个1页5分钟的片段中的dom转换。想知道你为什么不让他打包一个ExtJs解决方案TreeWalker是dom规范的一部分，它是一个内置功能；）海报上没有明确要求使用简单的js，而不是一些奇怪的api，他必须学会理解你的解决方案吗？ps-你的变量污染了全局谢谢cryix，但我不知道treewalker是什么东西。我稍后会看的。

<div id="contents">
    <h1>Article I</h1>
    <section id="sectionOne">
        <p>Hello World</p>
        <ul>
            <li><a href="#">Black world</a></li>
            <li><a href="#">White world</a></li>
            <li><a href="#">666 world</a></li>
        </ul>
    </section>
</div>
<button id="randomText">Random Text</button>

function changeContents() {
    var contents = document.getElementById("contents").innerText;

    var newContents = "";
    var alphabet = "abcdefghijklmnopqrstuvwxyz";
    var upperAlphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var number = "0123456789";

    function isLower(character) {
        return character >= "a" && character <= "z";
    }

    function isUpper(character) {
        return character >= "A" && character <= "Z";
    }

    function isDigit(character) {
        return character >= "0" && character <= "9";
    }   

    for (var counter = 0; counter < contents.length; counter++) {
        if (isLower(contents.charAt(counter))) {
            newContents += alphabet[Math.floor(Math.random() * alphabet.length)];
        }
        else if (isUpper(contents.charAt(counter))) {
            newContents += upperAlphabet[Math.floor(Math.random() * alphabet.length)];
        }
        else if (isDigit(contents.charAt(counter))) {
            newContents += number[Math.floor(Math.random() * alphabet.length)];
        }
        else {
            newContents += contents.charAt(counter);
        }
    }
    for (var counter = 0; counter < contents.length; counter++) {
        contents = contents.replace(contents[counter], newContents[counter]);
    }

    document.getElementById("contents").innerText = contents;
}