javascript - 如果 HTML 文本超过一定长度并且 HTML 标记已关闭，则显示“阅读更多”链接

Question

当 HTML 文本超过大约 50 个字符并且在最后一个结束标记之后，我正在尝试添加一个“阅读更多”链接。

$(document).ready(function(){
  var maxLength = 50;
  $(".html-text").each(function(){
  var myStr = $(this).html();
  if($.trim(myStr).length > maxLength){
    var newStr = myStr.substring(0, maxLength);
    var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
    $(this).empty().html(newStr);
    $(this).append('<a href="javascript:void(0);" class="read-more">Read more</a>');
    $(this).append('<span class="more-text">' + removedStr + '</span>');
  }
});
$(".read-more").click(function(){
  $(this).siblings(".more-text").contents().unwrap();
  $(this).remove();
});
});

  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="html-text">
<p>John has a red and white car that goes really fast.</p> <p>He needs to be careful.</p>
</div>

我的结果：

<div class="html-text">
   <p>John has a red and white car that goes really fas <a href="javascript:void(0);" class="read-more">Read more</a>
</div>

预期结果：

<div class="html-text">
    <p>John has a red and white car that goes really fast.</p> <a href="javascript:void(0);" class="read-more">Read more</a>
</div>

任何想法？希望我说清楚了。

标签： javascriptjquery

Answer 1

我认为可以用不同的方式来解决这个问题：

您需要的似乎是标签中的最后一个文本，而不仅仅是文本。这意味着您可能想要检查标签，然后检查文本大小。您可以检查父节点的每个子节点，直到 HTML 字符串达到您的最大长度，然后输出整个子节点。这样，您就可以保证获得完整的 HTML。希望下面的功能有所帮助

function findRequestedChild(el) {
  var cs = el.children();
  var textLength = 0;

  for (var i = 0; i < cs.length; i++) {
    var c = cs[i];
    textLength += $(c).html().length;

    if(textLength > 50) {
      break;
    }
  }

  return $(c).html();
}

alert(findRequestedChild($(".html-text")));

  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="html-text">
<p>John has a red and white car that goes really fast.</p> <p>He needs to be careful.</p>
</div>