Question

我有一些代码可以在页面上创建一个“打字文本效果” - 即javascript接受一个字符串并将其输出到屏幕上，使其看起来像是在键入。我从演示here中获取了代码。

问题在于我希望它输出HTML代码，例如屏幕上的输出应该是这样的：

<html>
<body>
Something here etc etc...
</body>
</head>

在chrome中，它的工作方式相当不稳定 - 有时候效果很好，但有时它不会显示第一个左尖括号，而是输出'html>'而不是{{1} }。在safari中，左角括号根本不显示。我尝试了各种各样的事情，使用'<html>'代替括号，使用unicode，但我所做的一切似乎都以相同的结果结束。

Here是代码的github要点，here是一个bl.ocks页面，用于显示它的实际效果。我试图制作一个jsfiddle，但无法让它正常运行，抱歉！

任何帮助都非常感谢，这让我疯狂。干杯尼克

Answer 1

而不是

$span.append(thisLine[letterIndex]);

试

$span.text($span.text() + thisLine[letterIndex]);

或者，根据下面的粉碎评论，你可以做一个字符串替换：

$span.append(thisLine[letterIndex].replace(/</g,'&lt;').replace(/>/g,'&gt;'));

这是有效的，因为当您想要显示HTML标记时，您需要使用<和>而不仅仅是<和>，否则浏览器会认为您'如果这对您有意义，请重新输入实际的HTML标记。 jquery text方法会自动为你转义括号，在我的第二个例子中，我们只是在将字符串传递给append之前进行字符串替换。

Answer 2

看起来好像代码将'<'追加为'＆amp;'，'l'，'t'，';'。没有验证这一点，但您可能想尝试：

 function typeLetter(lineIndex, letterIndex, $span, line, callback) {
   var thisLine = line;
   var thisLength = line.length;
   var chunk='';

   // add the letter
   chunk=thisLine[letterIndex];
   if ('&'==thisLine[letterIndex]) {
        for (var i=1; i<5; i++) {
           letterIndex++;
           chunk+=thisLine[letterIndex];
           if (';'==thisLine[letterIndex] || letterIndex>=thisLength-1) break;
        }
   }
   $span.append(chunk);
   ...

Javascript没有输出左尖括号

2 个答案: