Javascript - 附加文本和 html

Question

我正在尝试构建一个具有“终端外观”的网页，其中似乎正在输入文本。

我这样做是通过将 .txt 文件内容加载到字符串 var 中，设置一个“速度”（int）来定义一次读取多少个字符，然后在 @987654321 中调用 write 函数@。在写入功能上，我选择要使用$("#console").append(text.substring(index, (index+speed))); 写入的文本位，然后使用index += speed 递增

但是，.txt 内容具有纯文本以及 Html 标签（用于格式化文本），当这些内容输入浏览器时，html 标签显示不正确。例如，我的 txt 中看起来像 <span> This is a test </span> 的一些文本将看起来像 > This is a test! </span>（而不仅仅是“这是一个测试”）

如果我使用 .html(str) 并将子字符串作为 .substring(0, index) 传递，内容将被正确输入，但这对我不起作用，因为我想将多个 .txt 加载到同一页面中，并且 .html () 只是替换整个内容。

我知道这有点令人困惑，也很难解释，所以请随时问任何你不明白的地方。

Answer 1

你可以看看TypedJS

依赖于jQuery

希望对你有帮助！

Answer 2

您可能需要解码 HTML 字符串。试试这个：

var decodedString = $("<div />").html(text.substring(index, (index+speed))).html();
$("#console").append(decodedString);

这基本上创建了一个 div，解析并在该 div 中创建 html。然后我们从 div 中获取 html 并附加到我们真正想要的位置。

编辑：

所以你的问题是你将<span> This is a test </span> 分解成更小的块。附加任何部分 html 将永远不会起作用。 jQuery 无法正确解析它。 <spa + n>stuff + </sp + an> 不能单独插入并期望它正确呈现。有时 jQuery 会尝试填补缺失的部分，但不要依赖于此。而是将您的文本分解为跨度：

var decoded1 = $("<div />").html("<span> Thi</span>").html();
var decoded2 = $("<div />").html("<span>s is a tes</span>").html();
var decoded3 = $("<div />").html("<span>t </span>").html();

$("#console").append(decoded1);
$("#console").append(decoded2);
$("#console").append(decoded3);

当然，您将不再需要解码任何内容。您可以直接附加这些部分，它会起作用。

$("#console").append("<span> Thi</span>");
$("#console").append("<span>s is a tes</span>");
$("#console").append("<span>t </span>");