javascript - 使用 letterings.js 保留文本格式

Question

有没有办法在使用 letterings.js 插件时保留文本的格式(例如粗体、斜体)？我正在使用“单词”包装功能(https://github.com/davatron5000/Lettering.js/wiki/Wrapping-words-with-lettering%28%27words%27%29)，它似乎破坏了任何格式的文字。

这是一个例子:

<div class="text-block">This is a <i>sentence</i> <b>with <i>formatting</i></b>.</div>

使用letterings.js后变成:

<div class="text-block">
   <span class="word1">This</span>
   <span class="word2">is</span>
   <span class="word3">a</span>
   <span class="word4">sentence</span>
   <span class="word5">with</span>
   <span class="word6">formatting.</span>
</div>

这是我在 jQuery 中使用的函数:

$('.text-block').lettering('words');

我发现这样做可以保留粗体或斜体(遗憾的是不能同时保留两者):

$('.text-block b').lettering('words');

-或-

$('.text-block i').lettering('words');

您不能同时使用两者(即 $('.text-block b,.text-block i') )。

如果 letterings.js 无法实现，是否有其他插件或方法可以将每个单词包装在 span 中但保留格式？

Answer 1

如果将第 15 行的方法从 .text() 更改为 .html()，则可以使用

$('.text-block').lettering('words');

照原样，它不会去除标签。

使用此链接获取源代码:

https://gist.github.com/klatchbaldar/6956474