Javascript不输出左尖括号答案

【问题标题】：Javascript not outputting left angle bracketJavascript不输出左尖括号
【发布时间】：2013-07-12 12:02:51
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

查看 bl.ocks 页面示例时是否会出现问题？我已经尝试了大约 10 次，每次在 Chrome v27 中都运行良好。
示例页面也适用于我（在 Chrome 中）。
@nnnnnn 我想我读它是因为他想将它们呈现为 HTML，而不是实际显示标签。我的错。我在 IE10 中测试了 demo bl.ocks 示例，它工作正常。
Jason Evans - 它大部分时间 (90%) 在 Chrome 中都能正常工作。有时它不会 - 我不知道为什么，它完全不稳定。在 bl.ocks 示例中，它似乎工作正常。在野生动物园（对我来说）它根本不起作用。
“我尝试制作一个 jsfiddle，但无法正常运行” - 这是一个有效的 JSFiddle 版本：jsfiddle.net/KH588（只需复制进入右侧窗口并从左侧的“框架和扩展”部分选择所需的 jQuery 版本）。

标签： javascript jquery

【解决方案1】：

代替

$span.append(thisLine[letterIndex]);

试试

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

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

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

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

【讨论】：

更好的解决方案是在添加 thisLine[letterIndex] 之前对其进行转义...
啊哈，这似乎有效！您能否详细说明为什么这有效而之前的代码无效？

【解决方案2】：

看起来好像代码将'&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);
   ...

【讨论】：

嗯，这是真的，因为它是按字符搜索的。