Javascript-附加文本和html

Javascript - append pieces of text and html

本文关键字：html 文本 Javascript-      更新时间：2023-09-26

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

我通过将.txt文件内容加载到字符串var中，设置一个"速度"（int）来定义一次读取多少个字符，然后在setInterval中调用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（）只是替换整个内容。

我知道这有点令人困惑，也很难解释，所以你可以问任何你不理解的问题。

您可以查看TypedJS

它依赖于jQuery

希望它能有所帮助！

您可能需要解码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>");
相关文章：