Усекать текст без попадания вложенной ссылки

Question

У меня есть абзац, в котором есть вложенная в него ссылка.

<p>Lorem ipsum blah blah blah <a href="link">Read More</a></p> 

мне нужно укоротить текст пункта и заканчиваться многоточием, не затрагивая ничего в <a></a> тега.

Я могу сделать усечение текста с помощью $(p).text($(p).text().substring(0,n)+'...');, но, конечно, если я возьму абзац, используя $(p).text(), он будет содержать ссылку и будет ее отключать.

Есть ли способ захвата, а затем заменить усеченной версией текст <p> без ущерба для </a>. Предпочтительно без использования какого-либо регулярного выражения или для клонирования ссылки и повторного добавления его?

Answer 1

Вы можете сделать что-то подобное, используя nodeType. Затем вы можете изменить стоимость, используя textContent.

Для текстового узла, свойство NODETYPE вернется 3.

alert($('p').contents().filter(function() { 
 
    return this.nodeType == 3; 
 
})[0].textContent); 
 

 
//set new value 
 
$('p').contents().filter(function() { 
 
    return this.nodeType == 3; 
 
})[0].textContent = 'New text ';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<p>Lorem ipsum blah blah blah <a href="link">Read More</a></p>

Answer 2

$(function() { 
 
    
 
    var x = $("p").contents().get(0).nodeValue; // This will grab the text ignoring the other nodes: 
 

 
    $("p").html(x.substring(0, 5) + '...' + $("p").find("a").wrap("<p>").parent().html()); // Setting x and appending the <a> html 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p>Lorem ipsum blah blah blah <a href="link">Read More</a> 
 
</p>

Answer 3

вы можете попробовать следующий сценарий:

$(document).ready(function() { 
 
     var hrefTag = $('a').attr('href'); 
 
     $('p').html('<a href="' + hrefTag + '">Read More</a>'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Lorem ipsum blah blah blah <a href="link">Read More</a></p>