1

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

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

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

在 chrome 中，这以一种相当不稳定的方式工作 - 有时它工作得很好，但有时它不显示第一个左尖括号，让我得到输出'html>'而不是'<html>'. 在 safari 中，左尖括号根本不显示。我尝试了各种方法，'&lt;'使用 unicode 代替括号，但我所做的一切似乎都以相同的结果结束。

这是代码的 github 要点，这里是一个 bl.ocks 页面来展示它的实际效果。我试图制作一个 jsfiddle，但无法让它正常运行，对不起！

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

4

2 回答 2

2

代替

$span.append(thisLine[letterIndex]);

尝试

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

或者，根据下面的美眉评论，您可以进行字符串替换：

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

这是因为当你想显示 HTML 标记时，你需要使用&lt;and&gt;而不仅仅是<and >，否则浏览器会认为你正在放入一个实际的 HTML 标记，如果这对你有意义的话。jquerytext方法会自动为您转义括号，在我的第二个示例中，我们只是在将字符串传递给append.

于 2013-07-12T12:07:00.823 回答
1

看起来好像代码附加'&lt;'为'&'，'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);
   ...
于 2013-07-12T12:13:47.820 回答