Javascript - 追加文本和HTML

Question

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

我这样做是通过将.txt文件内容加载到字符串var中，设置一个“speed”（int），它将定义一次读取多少个字符，然后调用{{}中的write函数。 1}}。在写入函数上，我选择要用 Meteor.startup(function(){}); 写入的文本位，然后用setInterval

递增

但是，.txt内容包含纯文本和Html标记（用于格式化文本），当这些内容输入到浏览器中时，html标记不会出现。例如，我的txt上看起来像$("#console").append(text.substring(index, (index+speed)));的一些文字将显示为index += speed（而不只是“这是一个测试”）

如果我使用<span> This is a test </span>并将子字符串作为> This is a test! </span>传递，则内容将被正确输入，但这对我不起作用，因为我想将多个.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>");