添加 JQuery“阅读更多”脚本而不剥离 HTML 标签

Question

I'm applying a "Read More" link script to a Rich HTML field so that longer blocks of copy are truncated.我将“阅读更多”链接脚本应用于富 HTML 字段，以便截断较长的副本块。 Below is the code I'm using:下面是我正在使用的代码：

$(document).ready(function(){
    var maxLength = 300;
    $(".show-read-more").each(function(){
        var myStr = $(this).text();
        if($.trim(myStr).length > maxLength){
            var newStr = myStr.substring(0, maxLength);
            var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
            $(this).empty().html(newStr);
            $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>');
            $(this).append('<span class="more-text">' + removedStr + '</span>');
        }
    });
    $(".read-more").click(function(){
        $(this).siblings(".more-text").contents().unwrap();
        $(this).remove();
    });
});

In my template, I have the field flowing into a div with the show-read-more class applied, and it works fairly well.在我的模板中，我将字段流入一个 div 并应用了 show-read-more 类，并且效果很好。

Example usage follows:示例用法如下：

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Add Read More Link</title> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(document).ready(function() { var maxLength = 300; $(".show-read-more").each(function() { var myStr = $(this).text(); if ($.trim(myStr).length > maxLength) { var newStr = myStr.substring(0, maxLength); var removedStr = myStr.substring(maxLength, $.trim(myStr).length); $(this).empty().html(newStr); $(this).append(' <a href="javascript:void(0);" class="read-more">read more...</a>'); $(this).append('<span class="more-text">' + removedStr + '</span>'); } }); $(".read-more").click(function() { $(this).siblings(".more-text").contents().unwrap(); $(this).remove(); }); }); </script> <style> .show-read-more .more-text { display: none; } </style> </head> <body> <div class="show-read-more"> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <p>This is a very long paragraph...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur massa id odio pharetra, in varius diam tincidunt. Nulla fringilla nunc lorem. In et elit id diam porttitor finibus vitae ut odio. Morbi sollicitudin turpis non vulputate efficitur. Nulla rhoncus metus diam, porta consequat lacus scelerisque sed. Praesent et tempor mauris, non porttitor sapien. Pellentesque placerat ex non finibus gravida. Aenean at feugiat odio, sit amet ultricies diam. Integer vehicula pulvinar leo, vel laoreet neque lacinia nec. Vestibulum nec cursus orci, vel dapibus risus. Nullam et tincidunt mauris. Nunc iaculis egestas purus in rhoncus. Donec a turpis quis libero rutrum.</p> </div> </body> </html>

The problem is that the code is stripping out all of the HTML tags, making it all one big unformatted paragraph.问题是代码去掉了所有的 HTML 标签，使它成为一个大的无格式段落。 How can I achieve the same thing without striping out the HTML?如何在不剥离 HTML 的情况下实现相同的目标？

Answer 1

Using .text() will grab only the text and strip tags, if you are looking to grab all child elements and put that into a variable use .html();使用 .text() 将只抓取 text 和 strip 标签，如果您想抓取所有子元素并将其放入变量 use .html();

var myStr = $(this).html();

example例子

添加 JQuery“阅读更多”脚本而不剥离 HTML 标签

问题描述

1 个解决方案

解决方案1
0 2020-02-03 19:22:33

添加 JQuery“阅读更多”脚本而不剥离 HTML 标签

问题描述

1 个解决方案

解决方案1 0 2020-02-03 19:22:33

解决方案1
0 2020-02-03 19:22:33