Javascript 要创建一个“阅读更多”选项吗

我有一个事实框，其中的内容可能不同于

p、li或img标签

，内容长度也可能不同。因此，我尝试制作一个只显示部分内容的函数，以及一个按钮，用于

“阅读更多”

但我的问题是，当我使用子字符串来计算从何处开始，从何处停止，并将“阅读更多”按钮放入时，它会同时使用HTML文本和纯文本，但我只需要纯文本

因此，我的问题是：如何删除所有HTML文本并只获取纯文本，这样无论事实框中的内容是什么类型，它仍然只显示部分文本，隐藏其余文本，并使用一个带有显示更多选项的按钮

我的功能仅显示事实框中的部分：

$(document).ready(function () {
var showChar = 100;
var ellipsestext = "...";
var moretext = "Read more";
var lesstext = "less";

$('.showMoreLess').each(function () {
    var content = $(this).html();

    if (content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar - 1, content.length - showChar);
        var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function () {
    if ($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
});

$（文档）.ready（函数（）{
var-showChar=100；
var ellipseText=“…”；
var moretext=“阅读更多”；
var lesstext=“less”；
$（'.showMoreLess'）。每个（函数（）{
var content=$（this.html（）；
如果（content.length>showChar）{
var c=content.substr（0，showChar）；
var h=content.substr（showChar-1，content.length-showChar）；
var html=c+''+ellipseText+''+h+''；
$（this）.html（html）；
}
});
$（“.morelink”）。单击（函数（）{
if（$（this）.hasClass（“更少”））{
$（此）.removeClass（“更少”）；
$（this.html（moretext）；
}否则{
$（此）.addClass（“更少”）；
$（this.html（lesstext）；
}
$（this.parent（）.prev（）.toggle（）；
$（this.prev（）.toggle（）；
返回false；
});

}))

还有我的HTML，它可能会改变它包含的内容

<div class="fact-banner">
     <h4 class="title">fact headline</h4>
     <div class="showMoreLess">
          <div class="text">
                <p>blablabla</p>
                <p>blablabla</p>
                <p>blablabla</p>
                <p>blablabla</p>
          </div
          <div class="img">
                 <div class="image-banner text" style="padding-top: 0;margin-top:0">
                    <div class="image">
                        <img src="/bla.jpg" alt="bla" />
                    </div>
                    <div class="title">
                        <p>imageText</p>
                    </div>
                </div>
          </div> 

          <div class="text" style="padding-top: 0; padding-bottom: 0">
                <a href="linkToRelevantsite"> Relevant site to the article </a>
          </div>
      </div>

事实标题
喋喋不休

喋喋不休

喋喋不休

喋喋不休

尝试使用
.text（）
而不是
.html（）
：

你问题的措辞确实令人困惑。我想你想要的是溢出：隐藏而不是实际删除标记

将
.text包装器
附加到您的
.text
.text wrapper
折叠时具有固定高度，展开时具有自动高度
.text包装器
将具有
溢出：隐藏

这里有一个快速代码笔：
前面的一个问题很好地讨论了这一点：使用.text的问题是它删除了我的h4等，并将其全部转换为纯文本：/您的问题听起来像是期望的目标：“如何删除所有HTML文本并仅获取纯文本”，您能澄清您的问题吗？是的，对不起，我可以看出这有点误导。但我想做一个“阅读更多”选项，将我的一些内容隐藏在事实框中，我仍然保留所有标记。
var content = $(this).text();