Fatal编程技术网

Javascript不输出左尖括号

javascript jquery

Javascript不输出左尖括号,javascript,jquery,Javascript,Jquery,我有一些代码可以在页面上创建一个“键入文本效果”——即javascript获取一个字符串并在屏幕上以一种让它看起来像是被键入的方式输出它。我从一个演示中获取了代码 问题是我希望它输出html代码，例如，屏幕上的输出应该是： <html> <body> Something here etc etc... </body> </head> 这里的东西等等。。。 在chrome中，它的工作方式相当不稳定-有时它工作得很好，但有时它不显示第一个左尖括号

我有一些代码可以在页面上创建一个“键入文本效果”——即javascript获取一个字符串并在屏幕上以一种让它看起来像是被键入的方式输出它。我从一个演示中获取了代码

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

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


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

是代码的github要点，是一个bl.ocks页面，用于实际显示代码。我试图制作一个JSFIDLE，但无法使其正常运行，抱歉

非常感谢您的帮助，这让我快发疯了。 干杯 尼克

而不是

$span.append(thisLine[letterIndex]);
试一试

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

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

$span.append（thisLine[letterIndex].replace（//g'，）；
这是因为当您想要显示HTML标记时，您需要使用
和
，而不仅仅是
，否则浏览器会认为您放入了一个实际的HTML标记，如果这对您有意义的话。jquery方法会自动为您转义括号，在我的第二个示例中，我们只是在将字符串传递给
append
而不是

$span.append(thisLine[letterIndex]);
试一试

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

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

$span.append（thisLine[letterIndex].replace（//g'，）；
这是因为当您想要显示HTML标记时，您需要使用
和
，而不仅仅是
，否则浏览器会认为您放入了一个实际的HTML标记，如果这对您有意义的话。jquery方法会自动为您转义括号，在我的第二个示例中，我们只是在将字符串传递给
append
之前进行字符串替换，看起来代码将
'
附加为'&'，'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);
   ...

函数类型字母（lineIndex，letterIndex，$span，line，callback）{
var thisLine=直线；
var thisLength=line.length；
var chunk=''；
//加上这封信
chunk=thisLine[letterIndex]；
如果（'&'==thisLine[letterIndex]）{
对于（变量i=1；i=thisLength-1）中断；
}
}
$span.append（块）；
...
代码似乎附加了
'
作为'&'，'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);
   ...

函数类型字母（lineIndex，letterIndex，$span，line，callback）{
var thisLine=直线；
var thisLength=line.length；
var chunk=''；
//加上这封信
chunk=thisLine[letterIndex]；
如果（'&'==thisLine[letterIndex]）{
对于（变量i=1；i=thisLength-1）中断；
}
}
$span.append（块）；
...
查看bl.ocks页面示例时是否会出现问题？我已经试过10次了，在Chrome v27中每次都很好。示例页面对我也很有效（在Chrome中）。@nnnnnnnn我想我读到的是他想将它们呈现为HTML，而不是实际显示标签。是我的错。我在IE10中测试了演示bl.ocks的例子，它成功了。Jason Evans-它在Chrome中大部分时间（90%）都有效。有时它不会——我不知道为什么，它完全不稳定。在bl.ocks示例中，它似乎运行良好。在safari（对我来说）中，它根本不起作用。“我试图制作一个JSFIDLE，但无法使其正常运行”-这里有一个工作的JSFIDLE版本：（只需将各个部分复制到右侧窗口，并从左侧的“框架和扩展”部分选择所需的jQuery版本）.查看bl.ocks页面示例时是否出现问题？我已经试过10次了，在Chrome v27中每次都很好。示例页面对我也很有效（在Chrome中）。@nnnnnnnn我想我读到的是他想将它们呈现为HTML，而不是实际显示标签。是我的错。我在IE10中测试了演示bl.ocks的例子，它成功了。Jason Evans-它在Chrome中大部分时间（90%）都有效。有时它不会——我不知道为什么，它完全不稳定。在bl.ocks示例中，它似乎运行良好。在safari（对我来说）中，它根本不起作用。“我试图制作一个JSFIDLE，但无法使其正常运行”-这里有一个工作的JSFIDLE版本：（只需将各个部分复制到右侧窗口，并从左侧的“框架和扩展”部分选择所需的jQuery版本）。一个更好的解决方案是在添加它之前先转义
这行[letterIndex]
。啊哈，这似乎有效！你能详细解释一下为什么这行代码有效而之前的代码无效吗？一个更好的解决方案是在附加它之前，先跳过
thisLine[letterIndex]
。啊哈，这似乎有效！你能详细解释一下为什么这是有效的，而之前的代码没有吗？啊，这是正确的，因为它是按字符搜索的。啊，这是正确的，因为它是按字符搜索的。