javascript函数删除html部分

Question

“p”作为 javascript 的结果被删除，但我需要它们用于结构化目的。在文本上运行 javascript 后，如何将 html 标记保留在隐藏/第二个文本 block 中？

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>

fiddle Playground :https://jsfiddle.net/jhnr7z8L/
谢谢!

Answer 1

您可以应用递归来支持 DOM 元素的任何嵌套。您需要将 SecSec 类应用到可能更多的元素，这些元素出现在“Read More”元素之后，但仍然是 .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>

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