Javascript 使用JS和VueJS将HTML内容缩减到20个单词？

我正在使用VueJS创建一个新闻提要，在呈现内容时遇到了一些问题。我正在使用的API很遗憾，我现在无法进行适当的更改以满足我的需要。API为我提供了HTML标记中的所有内容，它还可以包括图像、列表和所有其他基础内容。我想做的是创建一个“readmore”部分，它将呈现前20个单词，如果只是第一个“p”标记的文本，那么就到此为止

有人知道用JS做这件事的快速有效的方法吗？ 我当前的显示VueJS渲染如下所示：

<div v-for="news_item in news_items">
                        <div v-bind:class="{ 'col-md-4': display}">
                            <div class="card">
                                <div class="header">
                                    <h2>
                                        {{news_item.title}} <small>{{news_item.subtitle}}</small>
                                    </h2>
                                </div>
                                <div class="body" style="padding-top: 0">
                                    <div class="row" style="margin-right: -20px; margin-left: -20px;">
                                        <div class="col-md-12"
                                                style="padding-left: 0px; padding-right: 0px;">
                                            <img :src="news_item['thumbnail']"
                                                    class="img-responsive smaller-img" alt=""
                                                    style=" margin: 0 auto; max-height: 250px;">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div v-html="news_item.content"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

{{news_item.title}{{news_item.subtitle}}

粗略实现，纯Js方法

document.getElementById（“addContent”）.onclick=display；
document.getElementById（“省略号”）.onclick=hideEllipsis；
函数显示（）{
document.getElementById（“指令”）.classList+=“隐藏”；
让内容=document.getElementById（“inputbox”）.value；
如果（content.length>30）{
设sliced=content.slice（30）；
设unsliced=content.substring（0,29）；
设spantag=document.createElement（“span”）；
spantag.className=“重新放置隐藏”
让text=document.createTextNode（切片）；
spantag.appendChild（文本）；
设spantag1=document.createElement（“span”）；
设text1=document.createTextNode（未许可）；
spantag1.追加子项（text1）；
让contentTag=document.getElementById（“内容”）；
contentTag.appendChild（spantag1）
contentTag.appendChild（spantag）
document.getElementById（“省略号”）.classList-=“隐藏”；
}
}
函数hideEllipsis（）{
document.getElementById（“省略号”）.classList+=“隐藏”；
document.queryselectoral（“span.hide”）[0]。类列表-=“hide”
}

.hide{
显示：无；
}

显示内容
键入超过30个字符，然后单击“显示内容”

粗略实现，纯Js方法

document.getElementById（“addContent”）.onclick=display；
document.getElementById（“省略号”）.onclick=hideEllipsis；
函数显示（）{
document.getElementById（“指令”）.classList+=“隐藏”；
让内容=document.getElementById（“inputbox”）.value；
如果（content.length>30）{
设sliced=content.slice（30）；
设unsliced=content.substring（0,29）；
设spantag=document.createElement（“span”）；
spantag.className=“重新放置隐藏”
让text=document.createTextNode（切片）；
spantag.appendChild（文本）；
设spantag1=document.createElement（“span”）；
设text1=document.createTextNode（未许可）；
spantag1.追加子项（text1）；
让contentTag=document.getElementById（“内容”）；
contentTag.appendChild（spantag1）
contentTag.appendChild（spantag）
document.getElementById（“省略号”）.classList-=“隐藏”；
}
}
函数hideEllipsis（）{
document.getElementById（“省略号”）.classList+=“隐藏”；
document.queryselectoral（“span.hide”）[0]。类列表-=“hide”
}

.hide{
显示：无；
}

显示内容
键入超过30个字符，然后单击“显示内容”

您似乎还没有尝试过任何东西，所以我将给您这些提示。如果遇到具体问题，请再次询问

制造

组件应该接收html作为道具

组件应该有一个数据项来控制是否展开

组件应该有一个获取第一段标记的前20个单词的。您可以使用从HTML节点获取文本

计算出的数据是最有可能构成挑战的部分。它看起来像这样

    blurb() {
      const div = document.createElement('div');
      div.innerHTML = this.content;  // this.content is the prop
      const firstP = div.querySelector('p');
      const text = firstP.textContent;
      const match = text.match(/(\S+\s*){0,20}/);
      return match[0];
    }

---

你似乎还没有尝试过什么，所以我给你一些建议。如果遇到具体问题，请再次询问

制造

组件应该接收html作为道具

组件应该有一个数据项来控制是否展开

组件应该有一个获取第一段标记的前20个单词的。您可以使用从HTML节点获取文本

计算出的数据是最有可能构成挑战的部分。它看起来像这样

    blurb() {
      const div = document.createElement('div');
      div.innerHTML = this.content;  // this.content is the prop
      const firstP = div.querySelector('p');
      const text = firstP.textContent;
      const match = text.match(/(\S+\s*){0,20}/);
      return match[0];
    }

---

这是使用指令的最佳时机：

请参见此处的代码笔：

使用

trim

指令，可以更改元素的内容。在上面的示例中，它将显示前5个单词，后跟一个省略号

如果您只是想要一个纯js解决方案，这应该可以做到：

    var resultString = str.split(' ').slice(0, 20).join(" ");

---

您可以使用trim指令，在

el

中搜索任何

p

标记，然后相应地更改其内容

这是使用指令的最佳时机：

请参见此处的代码笔：

使用

trim

指令，可以更改元素的内容。在上面的示例中，它将显示前5个单词，后跟一个省略号

如果您只是想要一个纯js解决方案，这应该可以做到：

    var resultString = str.split(' ').slice(0, 20).join(" ");

---

您可以使用trim指令，在

el

中搜索任何

p

标记，然后相应地更改其内容

您可以编写vue指令来解决此问题

将“最大高度”设置为

<ellipsis :content="someData"></ellipsis>