Text abschneiden, ohne verschachtelte Verbindung zu treffen

Question

Ich habe Absatz, der einen mehr gelesenen Link darin geschachtelt hat.

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

Ich brauche den Absatztext zu kürzen und es mit einem Auslassungszeichen enden, ohne etwas in dem <a></a> Tag zu beeinflussen.

Ich kann die Kürzung des Textes mit $(p).text($(p).text().substring(0,n)+'...'); tun, aber natürlich, wenn ich den Absatz mit $(p).text() greifen würde, würde es die Verbindung enthalten und würde es abschneiden.

Gibt es eine Möglichkeit zu greifen, und ersetzen Sie dann mit der abgeschnittenen Version, der Text der <p> ohne Auswirkungen auf die </a>. Am besten ohne Regex zu verwenden oder den Link zu klonen und neu anzuhängen?

Answer 1

Sie können so etwas mit nodeType tun. Dann können Sie den Wert unter Verwendung der textContent Eigenschaft ändern.

Für einen Textknoten wird die Eigenschaft nodeType 3. Rückkehr

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

Sie folgende Skript ausprobieren können:

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