Question

我使用的是Google Chrome版本43.0.2357.130。我试图使用innerHTML将输出附加到HTML元素，这是在循环内部完成的。我大部分时间都得到了预期的结果，但如果我一遍又一遍地点击“生成”按钮，最终会给我一个意想不到的结果。例如，其中一个密码将在随机位置被切断。我在Chrome中使用了JS调试器，但这没什么用。然后我尝试使用alert（）函数和innerHTML属性自己调试它，以便我可以比较输出。与innerHTML不同，alert（）弹出窗口中的输出从未被截断。

我在JS文件中用'/ * PROBLEM CODE * /'突出显示了我认为的问题代码。这些文件应放在同一目录中。这是HTML和JS：

<!DOCTYPE html>
<html>
<head>
    <title>PassGen - Random Password Generator</title>
    <!--link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css"-->
    <!--link href="css/main.css" rel="stylesheet" type="text/css"-->
    <!--script src="../app/js/jquery-2.1.4.js"></script-->
</head>
<body>
    <form>
        <h2>Password amount</h2>
        <input type="text" id="amount" name="amount" />
        <h2>Letter amount</h2>
        <input type="text" id="letters" name="letters" />
        <h2>Number amount </h2>
        <input type="text" id="numbers" />
        <h2>Symbol amount</h2>
        <input type="text" id="symbols" />
        <input onclick="generatePassword(); return false;" type="submit" value="Generate" />
    </form>
    <p id="output"></p>
    <script src="plain-app.js"></script>
</body>
</html>

// get the DOM element we will be using for the final output
var output = document.getElementById("output");

function generatePassword(amount) {

    clearPasswords();

    // get DOM form elements (user input)
    var amount = document.getElementById("amount").value;
    var letters = document.getElementById("letters").value;
    var numbers = document.getElementById("numbers").value;
    var symbols = document.getElementById("symbols").value;

    // populate character sets
    var letterSet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    var numberSet = "0123456789";
    var symbolSet = "~!@#$%^&*()-_+=><";
    var array = [];

    // if there is no password amount specified, create one password
    if(amount === undefined) {
        amount = 1;
    }

    for(var j = 0; j < amount; j++) {

        // random character sets to be concatenated later
        var rl = "";
        var rn = "";
        var rs = "";
        var tp = ""; // concatenated password before shuffling

        // 3 random letters
        for(var i = 0; i < letters; i++) {
            var rnd = Math.floor((Math.random() * 52));
            rl += letterSet[rnd];
        }

        // 3 random numbers
        for(var i = 0; i < numbers; i++) {
            var rnd = Math.floor((Math.random() * 10));
            rn += numberSet[rnd];
        }

        // 3 random symbols
        for(var i = 0; i < symbols; i++) {
            var rnd = Math.floor((Math.random() * 17));
            rs += symbolSet[rnd];
        }

        tp = rl + rn + rs; // string concatentation
        tp = tp.split(''); // transform string into an array

        // shuffling
        for(var i = 0; i < tp.length; i++) {
            var rnd = Math.floor(Math.random() * tp.length);
            var temp = tp[i];
            tp[i] = tp[rnd];
            tp[rnd] = temp;
        }

        // transform the array into a string
        tp = tp.join("");

        array[j] = tp; // for logging and debugging purposes

        // tp can be replaced with array[j], but still get the inconsistency

        /* PROBLEM CODE */
        output.innerHTML += (tp + "<br />");
        /* PROBLEM CODE */

        //alert(array[j]);
    }
    console.log(array);

    return array; // not useful?
}

// clear all password output
function clearPasswords() {

    while(output.hasChildNodes()) {
        output.removeChild(output.firstChild);
    } 
}

innerHTML是否有我不知道的副作用或我使用不正确？它不应该用于附加吗？是否应该使用appendChild（）？

Answer 1

问题是某些字符在HTML中具有特殊含义：<，>，&。

因此，你可以

从列表中删除这些字符

逃离他们：<，>，&

output.innerHTML += tp.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/&/g, '&amp;') + "<br />";

将文本解析为文本而不是HTML，例如

使用npm script based workflow和textContent

output.textContent += tp + "\n";

#output { white-space: pre-line; }

使用white-space和createTextNode

output.appendChild(document.createTextNode(tp));
output.appendChild(document.crateElement('br'));

JS：innerHTML不一致

1 个答案: