Question

我想实现readmore / less功能。即我将获得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>';

上面的输入是输入字符串，长度是最初显示的字符串的长度。此代码存在问题，假设我想从此字符串中删除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()递归遍历获取每个元素文本长度的元素，当你来到element with导致到目前为止的累积文本长度超过限制，在该点拆分此元素文本并将元素的文本设置为拆分的左侧。

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

另一方面，您可以将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中轻松实现，如果你利用它的动画功能，你可以轻松制作自己的插件，如：

(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 >

没有测试过，但它应该有用，或者至少应该给你一个基本的解决方案。

显示更多/更少，而无需在JavaScript / jQuery中删除Html标记

5 个答案: