JavaScript/jQueryのHtmlタグを削除せずにもっと表示/ less

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')を使用してDOM構造にHTMLを解析し、各要素テキストの長さを.text()で取得する要素を再帰的に調べて、累積テキストの長さこれまで限界を超えている場合は、この時点でこの要素テキストを分割し、要素のテキストを分割の左側に設定します。

この要素の前にすべての要素を置き、この要素の後に続くすべての兄弟などを無視します。しかし、私はそれを簡単に実装する方法は知らない。

---

一方、HTMLタグを剥がすだけで、なぜ気になるのですか。

Answer 3

dom要素にテキストがある場合は、dom要素のinnerText/textContentプロパティを使用して、タグのないテキストだけを取得できます。このテキストの部分文字列は、タグを気にすることなく使用できます。

var post_dom = document.getElementById('#post-content'); 
var input = post_dom.innerText || post_dom.textContent; 

Answer 4

私はここに最善の解決策は、プレーンテキストにあなたのHTMLに変換し、要約のための最初の数文字を抽出します

var textToHide = input; 
var textToShow = $("<div/>").html(input).text().substring(0, length); 

を使用することだと思います。その後、両方を同時に表示しようとするのではなく、省略記号をクリックしたときにそれらの間を切り替えます。

Answer 5

は、多分あなたは、問題を再考できます。代わりにあなたのテキストを変更するのではなく、あなたはそれがページに表示されている方法を変更することができます。
コンテンツの3行だけを表示する場合は、コンテンツのコンテナスタイルを、1つのコンテンツ行の高さに等しい高さに変更できます* 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();});'
< div class="container">
< div id="1" class="less">content goes here </div>
< a href="#" rel="1" class="showMore"> show more</a>
</ div >

それをテストしていませんが、それは動作するはずです、または少なくともあなたに私の基本的なアイデアを与える必要がありますように構成された、あなたのHTMLが持つ
ソリューション。