在 JavaScript/jQuery 中显示更多/更少而不剥离 Html 标签

Question

我想实现多读/少读功能。 即我将拥有 html 内容，我将显示该内容的前几个字符，并且在它前面会有一个阅读更多链接。 我目前正在使用此代码：

    var txtToHide= input.substring(length);
    var textToShow= input.substring(0, length);
    var html = textToShow+ '<span class="readmore">&nbsp;&hellip;&nbsp;</span>' 
+ ('<span class="readmore">' + txtToHide+ '</span>');
    html = html + '<a id="read-more" title="More" href="#">More</a>';

上面的 input 是输入字符串，length 是初始显示的字符串长度。 这段代码有一个问题，假设我想从这个字符串中删除 20 个字符： "Hello <a href='#'>test</a> output" ，html 标签介于两者之间，它会弄乱页面如果部分剥离。 我在这里想要的是，如果 html 标签落在范围之间，它应该覆盖整个标签，即我需要这里的输出是"Hello <a href='#'>test</a>" 。 我该怎么做

Answer 1

与其手动操作太多，我更喜欢您使用以下 jQuery 插件。

http://plugins.learningjquery.com/expander/index.html#getting-started

它将扩展和折叠您的文本以阅读更多选项，还为您提供许多自定义。

希望这会有所帮助。

谢谢！

侯赛因

Answer 2

这将非常困难，因为 HTML 不是常规语言，因此使用正则表达式会很麻烦。

您真正需要做的是使用 jQuery $('html text')将 HTML 解析为 DOM 结构，然后递归遍历元素，使用.text()获取每个元素文本的长度，当您使用导致到目前为止的累积文本长度超过限制，在该点拆分此元素文本并将其设置为拆分的左侧的元素文本。

然后保留此元素之前的所有元素，并忽略此元素之后出现的所有兄弟等。 但是我不知道如何简单地实现它。

---

另一方面，您可以将 HTML 标签去掉，何必呢。

Answer 3

如果你在 dom 元素中有文本，你可以使用 dom 元素的 innerText/textContent 属性来获取没有标签的文本。 可以使用此文本的子字符串而不必担心标签。

var post_dom = document.getElementById('#post-content');
var input = post_dom.innerText || post_dom.textContent;

Answer 4

我认为这里最好的解决方案是使用

var textToHide = input;
var textToShow = $("<div/>").html(input).text().substring(0, length);

这会将您的 HTML 转换为纯文本并提取摘要的前几个字符。 然后在单击省略号时在它们之间切换，而不是尝试同时显示两者。

Answer 5

也许你可以重新思考这个问题：你可以修改它在页面上的显示方式，而不是修改你的文本。
假设您只想显示 3 行内容，您可以将内容的容器样式修改为等于一个内容行的高度 * 3 的高度。

无论如何，这可以在 jquery 中轻松实现，如果您利用它的 animate 功能，您可以轻松制作自己的插件，例如：

(function($){  
   $.fn.lessDetails = function(desiredHeight){  
      var desiredHeight = desiredHeight || 20; //or any other "default" value
      return this.each(function(i){  
        $(this).realHeight = $(this).css("height");  
        $(this).css('height',desiredHeight);//or you could animate it
      });
   };  
  $.fn.moreDetails = function(){  
      return this.each(function(i){  
        $(this).css('height',$(this).realHeight || "auto");//or you could animate it
      });
   };   
})(jQuery);

然后你可以打电话：
$('.less').lessDetails(); $('.showMore').click(function(){$('#'+$(this).attr('rel')).moreDetails();});'
将您的 html 结构化为：
< div class="container"> < div id="1" class="less">content goes here </div> < a href="#" rel="1" class="showMore"> show more</a> </ div >

还没有测试过，但它应该可以工作，或者至少应该让你对我的解决方案有一个基本的了解。