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.

＆＃13;

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 ';

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

$(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

});

＆＃13;

<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>

＆＃13;

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>

在不触及嵌套链接的情况下截断文本

3 个答案: