Javascript 输入动画中的怪异行为

当我使用

str.replace

时，我有一个非常奇怪的行为。我有一个模拟打字的功能，一切都很好，但我添加了选项

skipTags

，如果设置为

true

，我会使用以下选项：

str = str.replace(/(<([^>]+)>)/ig,"");

。键入动画{
-webkit转换：translateZ（0）；
-moz变换：translateZ（0）；
-ms变换：translateZ（0）；
-o变换：translateZ（0）；
变换：translateZ（0）；
}
.输入动画：之后{
内容：“|”；
-moz动画：闪烁1.1s步数（5，开始）无限；
-webkit动画：闪烁1.1s步数（5，开始）无限；
动画：闪烁1.1s步数（5，开始）无限；
字号：100；
/*宽度：10px；
最小高度：45px；
身高：100%；
背景：#000；
显示：内联块*/
}
@-moz关键帧闪烁{
到{
可见性：隐藏；
}
}
@-webkit关键帧闪烁{
到{
可见性：隐藏；
}
}
@关键帧闪烁{
到{
可见性：隐藏；
}
}
p{
背景：黄色；
宽度：300px；
保证金：20px自动；
填充：30px；
}

洛雷姆·伊普苏姆·多洛（Lorem ipsum dolor），是一位杰出的献身者。此外，在《新格言》中，也有类似的必要性。不受阻碍的自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿
这是最低限度的劳动尊严，因为它是一种非暴力的劳动。等等，沃卢帕斯。Cum-minus，cupiditate.

看起来像一个奇怪的浏览器bug。我看不出你的代码有什么问题

在Chrome中，一个解决方法似乎是添加

display:inline块应用于闪烁光标的样式：

.typing-animation:after {
  content: "|";
  -moz-animation: blink 1.1s steps(5, start) infinite;
  -webkit-animation: blink 1.1s steps(5, start) infinite;
  animation: blink 1.1s steps(5, start) infinite;
  font-weight: 100;
  display: inline-block;  /** workaround for Chrome bug **/
}

不过，我还没有在任何其他浏览器中测试过这一点


/*
*
*
*
*版权所有（c）2015年米查·巴里
*根据麻省理工学院许可证授权。
*/
（函数（$）{
$.fn.jQueryTypingAnimationPlugin=函数（选项）{
变量设置=$.extend({
//这些是默认设置。
开始时间：0，
速度:50,，
斯基普塔格：错，
onStart:null，
onTyping:null，
onComplete:null
}，选项）；
返回此.each（函数（idx）{
//对每个选定元素执行某些操作。
变量$elem=$（本）；
if（$elem.prop（“标记名”）！==“输入”）{
变量大小=[]；
log（$elem.css（'box-sizing'））；
开关（$elem.css（'box-sizing'））{
//“填充框”的大小写：
//大小=[$（this.innerWidth（），$（this.innerHeight（））；
//console.log（'padding-box'）；
//中断；
//案例“边框框”：
//大小=[$（this.outerWidth（），$（this.outerHeight（））；
//console.log（'border-box'）；
//中断；
默认值：大小=[$elem.width（），$elem.height（）]；
console.log（'content-box'）；
}
$elem.宽度（尺寸[0]）；
$elem.高度（尺寸[1]）；
}
$elem.addClass（'typing-animation'）；
var str，
i=0，
isTag；
如果（$elem.prop（“标记名”）='INPUT'）{
str=$elem.val（）；
$elem.val（“”）；
$elem.focus（）；
}否则{
str=$elem.html（）；
$elem.html（“”）；
}
if（settings.skipTags===true）{
str=str.replace（/（]+）>）/ig，“”；
}
console.log（'str'，str）；
函数类型（）{
if（i==0&&settings.onStart）{
settings.onStart（）；
}
var text=str.slice（0，+i）；
如果（设置.输入）{
settings.onTyping（i-1，text.slice（-1），text）；
}
如果（$elem.prop（“标记名”）='INPUT'）{
$elem.val（文本）；
}否则{
$elem.html（文本）；
}
var char=text.slice（-1）；
如果（字符==''）{
isTag=假；
}
如果（isTag）{
返回类型（）；
}
如果（文本===str）{
$elem.removeAttr（'style'）；
if（settings.onComplete）{
settings.onComplete（）；
}
返回；
}
设置超时（类型、设置、速度）；
};
setTimeout（类型、设置、startDelay）；
});
};
}（jQuery））；
//初始化插件
$（'p'）.jQueryTypingAnimationPlugin({
开始时间：0，
速度:100,，
斯基普塔格斯：没错，
onStart:function（）{
log（'start typing'）；
},
onTyping：函数（idx、字符、文本）{
//log（'on index'+idx+'是字母'+char+'，当前文本：'+text+'）；
},
onComplete:function（）{
log（'typingcomplete'）；
}
});
。键入动画{
-webkit转换：translateZ（0）；
-moz变换：translateZ（0）；
-ms变换：translateZ（0）；
-o变换：translateZ（0）；
变换：translateZ（0）；
}
.输入动画：之后{
内容：“|”；
-moz动画：闪烁1.1s步数（5，开始）无限；
-webkit动画：闪烁1.1s步数（5，开始）无限；
动画：闪烁1.1s步数（5，开始）无限；
字号：100；
显示：内联块；
}
@-moz关键帧闪烁{
到{
可见性：隐藏；
}
}
@-webkit关键帧闪烁{
到{
可见性：隐藏；
}
}
@关键帧闪烁{
到{
可见性：隐藏；
}
}
p{
背景：黄色；
宽度：300px；
保证金：20px自动；
填充：30px；
}

洛雷姆·伊普苏姆·多洛（Lorem ipsum dolor），是一位杰出的献身者。此外，在《新格言》中，也有类似的必要性。不受阻碍的自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿自愿
这是最低限度的劳动尊严，因为它是一种非暴力的劳动。等等，沃卢帕斯。Cum-minus，cupiditate.
使用
.text（）
而不是
.html（）
第92行：

$elem.text(text);

我不知道为什么会这样，只是注意到浏览器在jQuery的
.html（）
方法中挂起，但在使用
.text（）
时不会挂起

还值得注意的是，更改字符串会带来不同（请尝试删除