JSとVueJSを使用してHTMLコンテンツを20単語まで切り詰めますか？

Question

私はVueJSでニュースフィードを作成していますが、コンテンツのレンダリングには少し問題があります。私は悲しいことに私が使用しているAPI私は現時点で私のニーズに適切に合うように変更することができません。 APIは私にすべてのコンテンツを既にHTMLタグで提供していますし、画像やリスト、その他のすべての基本情報も含めることができます。私がしたいのは、最初の "p"タグのテキストだけであれば最初の20語をレンダリングしてそこに止まる "もっと読む"セクションを作成することです。

誰でも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

のようになります。要素の内容上記の例では、最初の5つの単語の後ろに省略記号が続きます。

あなただけの純粋なJS解決した後であれば、これはそれを行う必要があります。

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

あなたはトリムディレクティブを使用して任意のpタグをelを検索し、それに応じてその内容を変更することができます。

Answer 2

ラフ実装、純粋のJSアプローチ

document.getElementById("addContent").onclick = display; 
 
document.getElementById("ellipsAnchor").onclick = hideEllipsis; 
 

 
function display() { 
 
    document.getElementById("instruction").classList+= " hide"; 
 
    let content = document.getElementById("inputbox").value; 
 
    if(content.length > 30) { 
 
    let sliced = content.slice(30); 
 
    let unsliced = content.substring(0,29); 
 
    let spantag = document.createElement("span"); 
 
    spantag.className = "toReplace hide" 
 
    let text = document.createTextNode(sliced); 
 
    spantag.appendChild(text); 
 
    let spantag1 = document.createElement("span"); 
 
    let text1 = document.createTextNode(unsliced); 
 
    spantag1.appendChild(text1); 
 
    let contentTag =document.getElementById("content"); 
 
    contentTag.appendChild(spantag1) 
 
    contentTag.appendChild(spantag) 
 
    document.getElementById("ellipsis").classList -= "hide"; 
 
    } 
 
} 
 

 
function hideEllipsis(){ 
 
    document.getElementById("ellipsis").classList += " hide"; 
 
    document.querySelectorAll("span.hide")[0].classList -= " hide" 
 
}

.hide { 
 
    display : none; 
 
}

<textarea type="text" id="inputbox"></textarea> 
 
<button id="addContent"> 
 
Show content 
 
</button> 
 
<div id="content"> 
 
</div> 
 
<div class="hide" id="ellipsis"> 
 
<a href="#" id="ellipsAnchor">Read More..</a> 
 
</div> 
 

 
<div id="instruction"> 
 
Type more than 30 characters and click show content 
 
</div>

Answer 3

あなたはまだ何をしようとしているように見えませんので、私は」ちょうどあなたにこれらのポインタを教えてください。特定の問題が発生した場合は、もう一度お尋ねください。

1. 成分が小道具としてHTMLを受け取るべきcomponent
3. それが展開されているかどうかを制御するためのデータ項目を有していなければならないコンポーネントが
4. 成分が最初取得computedを有するべきで作ります最初の段落タグの20語。 textContentを使用すると、HTMLノードからテキストを取得できます。

計算結果はチャレンジを行う可能性が最も高い部分です。

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

がここにcodepen参照：trimディレクティブを使用してhttps://codepen.io/huntleth/pen/GOXaLo

を、あなたは変更することができ、それは、このディレクティブを使用するのに最適な時間です。この

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]; 
    }