使用jQuery从左到右为段落中的每行文字加下划线

Question

我希望动画下划线，从左到右的段落中的每一行文字按钮点击jQuery，文本将动态输入。段落中的文字中没有新行（\ n）。

我如何接近它，直到现在如下;

我正在使用正则表达式按字符数分隔文本行而不破坏任何单词，并将其包装为带有“高亮”类的跨度，然后在“span.highlight”中插入新的空跨度，高度为12像素宽度0px。当我单击按钮I时，将宽度0设置为100％，它看起来像从左到右下划线。

这种方法的问题是没有响应。当窗口宽度减小时，单词会断开到新行，而在动画中，这些单词不会加下划线。

请建议解决方案。

这是我的代码;

$.fn.highlight = function(str) {
  var regex = new RegExp(str, "gi");
  return this.each(function() {
    $(this).contents().filter(function() {
      return this.nodeType == 3 && regex.test(this.nodeValue);
    }).replaceWith(function() {
      return (this.nodeValue || "").replace(regex, function(match) {
        return "<span class='highlight'>" + match + "</span>";
      });
    });
  });
};
var text = '';
text = $('p').text();
var RExpress = /\S[\s\S]{0,105}\S(?=\s|$)/gi;
var splittedText;
var result = new Array();
while ((splittedText = RExpress.exec(text)) !== null) {
  $("p").highlight(splittedText[0]);
}

提前致谢。