顯示更多/更少沒有剝離Html標籤在JavaScript/jQuery

我想實現讀/更少功能。即我將擁有html內容，並且我將顯示該內容的前幾個字符，並且會在前面顯示更多鏈接。我目前在使用這個代碼：顯示更多/更少沒有剝離Html標籤在JavaScript/jQuery

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>';

上面的輸入是輸入字符串，length是最初顯示的字符串的長度。這段代碼存在問題，假設我想從這個字符串中去掉20個字符： "Hello <a href='#'>test</a> output"，html標籤會在它們之間傳遞，如果將它部分地剝離，它會弄亂頁面。我在這裏想要的是，如果html標籤在範圍之間，它應該覆蓋整個標籤，即我需要這裏的輸出爲"Hello <a href='#'>test</a>"。我怎樣才能做到這一點

來源

2011-01-06 Rocky Singh

我不相信有一個簡單的方法 - 你只需要寫一個算法，將通過文本，並確保它顯示開始和結束標籤，如果它被夾在中間。 – xil3 2011-01-06 09:10:58

而不是手動做太多，我寧願你去跟隨下面的jQuery插件。

http://plugins.learningjquery.com/expander/index.html#getting-started

它將展開和摺疊您的文本閱讀更多的選擇，還爲您提供多少定製。

希望這會有所幫助。

謝謝！

侯賽因

來源

2011-01-06 09:29:03 eHussain

這將是非常困難的，因爲HTML不是一種常規的語言，所以使用正則表達式會很麻煩。

好想你需要做的是解析HTML到使用jQuery $('html text')一個DOM結構，然後遞歸地獲取每個元素的文本長度的元素使用.text()去，當你來到一個元素與原因累計文本長度到目前爲止已超過極限，在該點分割該元素文本並將其元素的文本設置爲分割的左側。

然後保留此元素之前的所有元素，並忽略此元素之後發生的所有同胞等。但是我不知道如何簡單地實現它。

另一方面，你可以去除HTML標籤，爲什麼要打擾。

來源

2011-01-06 09:22:52

如果你在dom元素中有文本，你可以使用dom元素的innerText/textContent屬性來得到沒有標籤的文本。可以使用該文本的子串而不用擔心標籤。

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

來源

2011-01-06 09:24:06 vsr

我覺得這裏最好的解決辦法是使用

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

，將你的HTML轉換爲純文本，並提取前幾個字符的總結。然後在他們單擊省略號時切換它們，而不是嘗試同時顯示兩者。

來源

2011-01-06 09:28:48 MarkXA

也許你會重新考慮這個問題：不是修改你的文字，你可以修改它在網頁上顯示的方式。
說出如果只想顯示3行內容，則可以將內容的容器樣式修改爲等於一個內容行* 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();});'
有你的HTML結構爲：
< div class="container"> < div id="1" class="less">content goes here </div> < a href="#" rel="1" class="showMore"> show more</a> </ div >

沒有測試它，但它應該工作，或者至少應該給你的基本思路我解決方案。

來源

2011-01-06 11:25:33

顯示更多/更少沒有剝離Html標籤在JavaScript/jQuery

回答

相關問題