来自静态HTML的Typed.js /字符串（适用于SEO）

Question

现在，我正在努力使用Typed.js jQuery插件。

我要做的是，不是在strings数组中插入字符串，而是在页面上放置HTML div并从中读取。 这样，机器人和搜索引擎以及禁用JavaScript的用户都可以看到页面上的文字。

<div id="text1">

  <p>
    Hello,
    <br>
    <br>
    bla bla bla
    <br>
    <br>
    bla bla bla.
  </p>

</div>

<span id="typed"></span>

<script>
$(function(){
    $("#typed").typed({
        stringsElement: $('#text1')
        typeSpeed: 50
    });
}); </script>

我也不明白span是什么。

Answer 1

一个问题可能是您没有最新版本的Typed.js。 尽管1.1.1版是cdnjs.com和Bower上可用的最新版本，但是GitHub上的代码此后一直进行了更新，但尚未发布。 最新自述文件中描述的stringsElement功能仅适用于stringsElement中的最新代码 ，不适用于已发布的版本1.1.1。 其他用户也注意到了这个问题 。

此外，您需要通过在$('#text1')之后添加逗号来修复语法错误。 在JavaScript对象文字{} ，您需要在每个key: value对之后加上一个逗号，最后一个除外。

将这两个修复程序放在一起，您将获得以下工作代码：

 $(function() { $("#typed").typed({ stringsElement: $('#text1'), typeSpeed: 50 }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://raw.githubusercontent.com/mattboldt/typed.js/master/dist/typed.min.js"></script> <div id="text1"> <p> Hello, <br> <br> bla bla bla <br> <br> bla bla bla. </p> </div> <span id="typed"></span> 

另外，这可能是有目的的，但请注意， <div id="text1">的格式与README中的示例不同。 而不是使用许多<p> ，而是使用一个包含许多用<br>分隔的行的<p> 。 这样做的效果是，插件不会在每行上都退格，而是一次写入所有内容。 如果这不是您想要的，请使用自述文件中的格式。

至于span是什么，它是页面上将显示键入动画的元素。 您可以在页面上移动该span ，并根据需要使用CSS设置其样式。 您在编写$("#typed")时在代码中引用该span ，该span选择id="typed"来选择span 。 然后，调用.typed()告诉Typed.js插件将其动画文本放入该元素中。

Answer 2

您可以做的是使用div text1的文本内容

// Working for IE and Others
var textContent = $('#text1').innerText || $('#text1').textContent;
// Use string for the typed.js
$(function(){
    $("#typed").typed({
        stringsElement: textContent,
        typeSpeed: 50
    });
});

这应该对您有用，您可能需要做一些额外的解析并处理内容，但这很简单。

的jsfiddle