javascript - 使用 JS 和 VueJS 将 HTML 内容减少到 20 个单词？

Question

我正在使用 VueJS 创建新闻提要，但在渲染内容时遇到了一些问题。遗憾的是，我目前无法更改我正在使用的 API 来满足我的需要。 API 为我提供了 HTML 标签中已有的所有内容，它还可以包括图像和列表以及所有其他基础知识。我想要做的是创建一个“阅​​读更多”部分，该部分将呈现前 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>

Answer 1

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

https://v2.vuejs.org/v2/guide/custom-directive.html

请参阅此处的代码笔:https://codepen.io/huntleth/pen/GOXaLo

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

如果您只是在寻找纯 js 解决方案，那么这应该可以:

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

您可以使用trim指令并在el中搜索任何p标签，然后相应地更改它们的内容。