Javascript 未在正确的空格中写入空格

Question

我有这个 JavaScript

function getTags(tags){
    tags = JSON.parse(tags);
    text = "";
    for (i = 0; i < tags.length; i++) {
        text += '<span class="label label-strong">' + tags[i] + '</span>&nbsp';
    }
    return text;
}

这个带有 bootstrap 3 的 html

<div class="pull-right">
    <script>document.write(getTags('["Factions", "Minigames"]'));</script>
</div>

并且在页面中，这些跨度之间应有的空格写在所有跨度之后。即使我删除了“向右拉”，空格仍然写错了

感谢您的帮助

Answer 1

许多开发人员会告诉您 document.write() 是邪恶的。我倾向于同意Peter Bailey's response很容易严重滥用它。

无论如何，你的脚本一开始相当安全，但后来Rocket Loader掌握了它并决定稍后在页面加载后尝试运行它。它应该能够“在 window.onload 之后安全地运行任何 JavaScript 代码”，这意味着它会修改您的脚本以使其可以安全运行。您无法在 window.onload 之后安全地执行 document.write()。

无论 Rocket Loader 在做什么，它都会破坏您的代码，因为当作为真正的 JavaScript 而不是“RocketScript”运行时，它工作得很好。因此，您可以将脚本编辑为“安全”，或者禁用 RocketScript。编写代码的更安全的方法是动态构建节点。您的页面已使用 jQuery，因此此示例代码也可以使用:

$(function(){
    var nbsp = "\xA0";
    $("[data-tags]").each(function(){
        var el = $(this);
        var tags = el.data("tags").split(",");
        for (var i = 0; i < tags.length; i++) {
            var tag = $("<span>");
            tag.addClass("label label-strong");
            tag.text(tags[i]);
            el.append(tag, nbsp);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class="pull-right" data-tags="Factions,Minigames"></div>