Truncate text without hitting nested link

Question

I have paragraph that has a read more link nested in it.

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

I need to truncate the paragraph text and end it with an ellipsis without affecting anything in the <a></a> tag.

I can do the truncation of the text using $(p).text($(p).text().substring(0,n)+'...'); but of course if I grab the paragraph using $(p).text() it would include the link and would lop it off.

Is there a way to grab, and then replace with the truncated version, the text of the <p> without affecting the </a>. Preferably without having to use any regex or having to clone the link and re-append it?

you want to do this by clicking on anchor tag ? or on page load ? — Sunil Kumar, Apr 28 '16 at 13:13
Take a look : http://stackoverflow.com/questions/4106809/how-can-i-change-an-elements-text-without-changing-its-child-elements — Mehran Torki, Apr 28 '16 at 13:15
@MehranTorki interesting hadn't thought to use ChildNodes, will look into that (if this is a duplicate to that feel free to mark it I'm not sure). — DasBeasto, Apr 28 '16 at 13:18
@Reddy Personal preference really I view RegEx as messy especially for something that (I thought) would be so trivial. — DasBeasto, Apr 28 '16 at 13:20

rrk · Answer 1 · 2016-04-28T13:25:31.583

2

You can do something like this using nodeType. Then you can change value using textContent property.

For a text node, the nodeType property will return 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>

edited Apr 28 '16 at 13:25

answered Apr 28 '16 at 13:16

rrk

15,677
4
29
45

looks good!! do you mind explaining what `this.nodeType == 3;` does? – Rajshekar Reddy Apr 28 '16 at 13:18
@Reddy I just did. – rrk Apr 28 '16 at 13:21
Please check whether the question is duplicate or not. If not, then try to answer it. – Mehran Torki Apr 28 '16 at 13:28

score 1 · Answer 2 · answered Apr 28 '16 at 13:21

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

score 0 · Answer 3 · answered Apr 28 '16 at 13:22

you can try following script:

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

Truncate text without hitting nested link

3 Answers3