javascript函数删除html部分

Question

由于从javascript中删除了“ p”，但出于结构目的，我需要它们。 在文本上运行javascript之后，如何将html标签保留在隐藏/第二个文本块中？

 function AddReadMore() { //This limit you can set after how much characters you want to show Read More. var carLmt = 50; // Text to show when text is collapsed var readMoreTxt = " ... Read More"; // Text to show when text is expanded var readLessTxt = " Read Less"; //Traverse all selectors with this class and manupulate HTML part to show Read More $(".addReadMore").each(function() { if ($(this).find(".firstSec").length) return; var allstr = $(this).text(); if (allstr.length > carLmt) { var firstSet = allstr.substring(0, carLmt); var secdHalf = allstr.substring(carLmt, allstr.length); var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span><span class='readMore' title='Click to Show More'>" + readMoreTxt + "</span><span class='readLess' title='Click to Show Less'>" + readLessTxt + "</span>"; $(this).html(strtoadd); } }); //Read More and Read Less Click Event binding $(document).on("click", ".readMore,.readLess", function() { $(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent"); }); } $(function() { //Calling function after Page Load AddReadMore(); }); 

 .addReadMore.showlesscontent .SecSec, .addReadMore.showlesscontent .readLess { display: none; } .addReadMore.showmorecontent .readMore { display: none; } .addReadMore .readMore, .addReadMore .readLess { font-weight: bold; margin-left: 2px; color: blue; cursor: pointer; } .addReadMoreWrapTxt.showmorecontent .SecSec, .addReadMoreWrapTxt.showmorecontent .readLess { display: block; } 

 <div class="addReadMore showlesscontent"> <p>Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht. Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht.</p> <p>Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die Suche im Internet nach "lorem ipsum" macht viele Webseiten sichtbar, wo diese noch immer vorkommen. Mittlerweile gibt es mehrere Versionen des Lorem Ipsum, einige zufällig, andere bewusst (beeinflusst von Witz und des eigenen Geschmacks)Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.</p> <p>Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht. Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die</p> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

小提琴乐园： https : //jsfiddle.net/jhnr7z8L/
谢谢！

Answer 1

您可以应用递归，以便支持DOM元素的任何嵌套。 您可能需要将SecSec类应用于可能更多的元素，这些元素发生在“更多信息”元素之后，但仍属于.addReadMore DOM树的一部分。

以下是修改您的代码以支持该代码的方法：

 function AddReadMore() { var carLmt = 50; var readMoreTxt = " ... Read more"; var readLessTxt = " Read less"; $(".addReadMore").each(function() { if ($(this).find(".firstSec").length) return; var left = carLmt; function recur(elem) { $(elem).contents().each(function () { var allstr = $(this).text(); // If breaking point is somewhere deeper within this element, recurse if (this.nodeType === 1 && 0 <= left && left <= allstr.length) return recur(this); if (left < 0) { // "Read more" was already added. // Hide all following elements as we backtrack: return this.nodeType === 1 ? $(this).addClass("SecSec") : $(this).wrap($("<span>").addClass("SecSec")); } left -= allstr.length; if (left >= 0) return; // Not yet there. Continue with siblings // Found the text node that needs to be clipped: this.nodeValue = allstr.slice(0, left); // Add the remainder of the text in an additional span element, and the link to expand $(this).after( $("<span>").addClass("SecSec").text(allstr.slice(left)), $("<span>").addClass("readMore").attr("title", "Click to show more").text(readMoreTxt), ); }); } recur(this); // The "read less" link should be at the very end of this element $(this).append( $("<span>").addClass("readLess").attr("title", "Click to show less").text(readLessTxt) ); }); //Read More and Read Less Click Event binding $(document).on("click", ".readMore,.readLess", function() { $(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent"); }); } $(function() { //Calling function after Page Load AddReadMore(); $("#html").text($(".addReadMore").html()); $("button").click(function () { $("#html").toggle(); }); }); 

 .addReadMore.showlesscontent .SecSec, .addReadMore.showlesscontent .readLess { display: none; } .addReadMore.showmorecontent .readMore { display: none; } .addReadMore .readMore, .addReadMore .readLess { font-weight: bold; margin-left: 2px; color: blue; cursor: pointer; } .addReadMoreWrapTxt.showmorecontent .SecSec, .addReadMoreWrapTxt.showmorecontent .readLess { display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>toggle HTML</button> <pre id="html" style="display:none"></pre> <div class="addReadMore showlesscontent"> <p>Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht. Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht.</p> <p>Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die Suche im Internet nach "lorem ipsum" macht viele Webseiten sichtbar, wo diese noch immer vorkommen. Mittlerweile gibt es mehrere Versionen des Lorem Ipsum, einige zufällig, andere bewusst (beeinflusst von Witz und des eigenen Geschmacks)Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.</p> <p>Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht. Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die</p> </div> 

就像您自己的代码一样，此版本也不会删除节点，因此将存在于它们上的所有事件处理程序保持活动状态。

Answer 2

我会将完整的HTML存储到data- attribute中，并按需恢复它。

演示：

 var textCollapser = { charLimit: 400, readMoreTxt: ' ... Read More', readLessTxt: ' Read Less', collapse: function ($element) { // Do nothing if the text doesn't exceed character limit if ($element.text().length <= this.charLimit) { return; } // Store the current HTML into a data- attribute if it wasn't already $element.data('fullHtml', $element.data('fullHtml') || $element.html()); // Collapse on char limit and remove any HTML "remains" $element.html($element.html() .substring(0, this.charLimit) .replace(/<[az]*\\s*$|[az]*\\s*\\/?>$/i, '') ); // Add the read more action to the last paragraph var $lastParagraph = $element.find('p:last'); $lastParagraph = $lastParagraph.length ? $lastParagraph : $element; $lastParagraph.append($('<a>').addClass('readMore').text(this.readMoreTxt)); }, expand: function ($element) { // Restore the full HTML $element.html($element.data('fullHtml')); // Add the read less action to the last paragraph var $lastParagraph = $element.find('p:last'); $lastParagraph = $lastParagraph.length ? $lastParagraph : $element; $lastParagraph.append($('<a>').addClass('readLess').text(this.readLessTxt)); } }; $(function () { $('.addReadMore').each(function () { textCollapser.collapse($(this)); }); $('.addReadMore').on('click', '.readMore', function () { textCollapser.expand($(this).closest('.addReadMore')); }); $('.addReadMore').on('click', '.readLess', function () { textCollapser.collapse($(this).closest('.addReadMore')); }); }); 

 .addReadMore .readMore, .addReadMore .readLess { font-weight: bold; margin-left: 2px; color: blue; cursor: pointer; } 

 <div class="addReadMore"> <p>Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht. Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht.</p> <p>Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die Suche im Internet nach "lorem ipsum" macht viele Webseiten sichtbar, wo diese noch immer vorkommen. Mittlerweile gibt es mehrere Versionen des Lorem Ipsum, einige zufällig, andere bewusst (beeinflusst von Witz und des eigenen Geschmacks)Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.</p> <p>Der Punkt, Lorem Ipsum zu nutzen, ist, dass es mehr oder weniger die normale Anordnung von Buchstaben darstellt und somit nach lesbarer Sprache aussieht. Viele Desktop Publisher und Webeditoren nutzen mittlerweile Lorem Ipsum als den Standardtext, auch die</p> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

正如@trincot指出的那样，请注意，这样做“简单”，字符限制就不会100％准确，因为它会切入HTML标记本身。 看一下@trincot的答案，它对此更严格。