Я применяю сценарий ссылки «Подробнее» к полям Rich HTML, чтобы обрезать более длинные блоки копирования. Ниже приведен код, который я использую:
$(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();
});
});
В моем шаблоне поле превращается в div с примененным классом show-read-more, и оно работает довольно хорошо.
Пример использования следующий:
<!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>
Проблема в том, что код удаляет все теги HTML, превращая их в один большой неформатированный абзац. Как я могу добиться того же, не убирая HTML?