使用 jquery 阅读更多/更少而不丢失 html答案

【问题标题】：Read More/Less using jquery without lossing html使用 jquery 阅读更多/更少而不丢失 html
【发布时间】：2016-08-02 17:10:07
【问题描述】：

我编写了 jquery 以在 250 个字符后添加阅读更多/阅读更少。我已经实现了以下查询：

var minimized_elements = $('.field-type-text-with-summary .field-items');
var minimize_character_count = 250;    
minimized_elements.each(function(){    
  var TextContent = $(this).text();
  var TextContentLenght = TextContent.length;
  var t = $(this).html();
  if(t.length < minimize_character_count ) return;
  $(this).html(
    t.slice(0,minimize_character_count)+
      '<span>...</span>'+'<a href="#" class="read_more"     style="color:#FF8403;">Read more</a>'+
      '<span style="display:none;">'+ TextContent.slice(minimize_character_count,TextContentLenght)+'&nbsp'+'<a href="#" class="read_less" style="color:#FF8403;">Read less</a></span>'
    );  
  });
  $('a.read_more', minimized_elements).click(function(event){
    event.preventDefault();
    $(this).hide().prev().hide();
    $(this).next().show(); 

  });
  $('a.read_less', minimized_elements).click(function(event){
    event.preventDefault();
    $(this).parent().hide().prev().show().prev().show();

  });

但我的问题是这个脚本会删除所有 html 标记，例如如果文本包含粗体或下划线字符，它将所有文本显示为纯文本。我想阅读更多/阅读所有格式。请建议。提前致谢。

【问题讨论】：

标签： jquery

【解决方案1】：

    <!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.readLess{ display:none;}
.conteMain{ border:1px solid #ddd; background:#f5f5f5; padding:10px; font:normal 14px Arial, Helvetica, sans-serif;}
#conteMain p{ margin:0; padding:0;}
.readLess,.readMore{ background:#3CF; color:#fff; padding:5px 10px; width:80px; margin:10px 0px; cursor:pointer}
.readLess:hover,.readMore:hover{ background:#090}
</style>
</head>

<body>
<div class="conteMain">
<div id="conteMain">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br>
<br>
<p>vived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like </p><br>

<p>vived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like </p><br>

<p>vived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like </p><br>

<p>vived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like </p><br>

<div>ved not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software l</div><br>


 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    var conte = $("#conteMain").text().length;
    var conte1 = $("#conteMain").text();
    var bx1 = conte1.slice('',200); 

    if(conte > 200){
        $("#conteMain").after("<span class='moreC'>"+ bx1 +"</span>"+"<div class='readMore'>Read More</div><div class='readLess'>Read Less</div>");
        $("#conteMain").css("display","none");
    };

    $(".readMore").click(function(){
        $("#conteMain").slideDown("slow");
        $(".moreC").css("display","none");
        $(".readLess").css("display","block");
        $(this).css("display","none");
    });

    $(".readLess").click(function(){
        $("#conteMain").slideUp("slow");
        $(".moreC").css("display","block");
        $(".readMore").css("display","block");
        $(this).css("display","none");
    });

</script>
</body>
</html>

【讨论】：

【解决方案2】：

您正在使用：

 var TextContent = $(this).text();

因此，您仅在根据 .html() 选择子字符串时才计算文本的字母。这将计算完整的 html，包括元素的文本。

var TextContent = $(this).html();

这不是一件容易的事，因为当你将你的子字符串从 0 剪切到 250 时，你可能会在 html 元素的中间中断。

保持 HTML 原样的最简单解决方案是使用更改高度。（在阅读较少时，元素的高度例如为 50px，然后在阅读更多时为“自动”或其他）。

另一个更复杂的解决方案是遍历主 .each() 的所有子元素，将它们相加，当组合的 .text() 长度大于 250 时，应该放置“readmore”。（但根据您的 HTML 结构，您应该考虑到当前没有子节点的长度可能已经大于 250...

我建议使用高度方法，如果没有，您可以制作小提琴，我们可以帮助您。

【讨论】：

我改变了 $(this).html( t.slice(0,minimize_character_count)+ '...'+'阅读更多'+ '' );但是在它阅读较少后无法正常工作并开始显示阅读更多。请提供不会破坏现有脚本的内容。
即使对于已修剪的字符串，也很难保持 HTML，这是实际问题。想不通！
看看这个 - stackoverflow.com/questions/1583476/…，想法是使用 .contents 过滤器 nodeType==3 运行，计算每个长度，当你达到最大长度时，插入你的跨度。跨度>