How to select text after an element with jquery?

Question

I have a paragraph:

<p>red orange yellow green blue indigo violet</p>

I need to wrap the ending text in something that I can hide/show on click, like so:

<p>red orange yellow green <a href="#">...Show More</a> <span="unhideme">blue indigo violet</span> </p>

This is how far i've gotten:

<p>red orange yellow green <a href="#">...Show More</a> blue indigo violet </p>

Is there some way to say "select all text after the a tag and wrap it in a span" with jquery? Or some other solution to generating a "Read More" button with jquery?

What stops you from wraping the text in a span to begin with? — puelo
– puelo, Commented Nov 11, 2013 at 20:39
Show us the JS so we can see how you are creating these if your are dynamically and how youre adding the a tag — Kierchon
– Kierchon, Commented Nov 11, 2013 at 20:39
Yes, they are being created dynamically. I'm using a cms (modx) so basically, the client pastes their paragraph in the cms, and I need to create some "read more" functionality once it gets too long. I'm using a modx thing to add the a tag after a certain number of characters. — Shonna
– Shonna, Commented Nov 11, 2013 at 20:47
It looks like you are trying this order: 1) find the paragraph 2) add an anchor after x words 3) wrap the remainder in a span. It would probably be better to swap that around: 1) find the paragraph 2) split the text inside after x words 3) wrap the second part in a span 4) add the anchor before the new span — Steve
– Steve, Commented Nov 11, 2013 at 20:54

Kierchon · Accepted Answer · 2013-11-11 20:58:38Z

Just parse through the HTML of the p tag. Start by getting it all then breaking it up then just append the a and span tags before making it the HTML again.

var allText = $("p").html(); var firstHalf = allText.substring(0,INDEX AT WHICH YOU WOULD LIKE TO STOP); var secondHalf = allText.substring(INDEX AT WHICH YOU WOULD LIKE TO STOP+1); var newHTML = firstHalf + '<a href="#">...Show More</a><span class="unhideme">' + secondhalf + "</span>"; $("p").html(newHTML);

Ooo this looks like it will work! But, what does "INDEX AT WHICH YOU WOULD LIKE TO STOP" refer to? What do I put there?
That is the number of characters that you would like to show. Any after the integer you put in there will be put in the read more section. @Shonna

zgood · Accepted Answer · 2013-11-11 21:18:32Z

This maybe a start:

$('p').each(function () { var $p = $(this); var words = $p.html().split(' '); $p.html(''); for (var i = 0; i < 3; i++) { $p.append(words[i] + ' '); } if (words.length > 3) { var htmlStr = '<a href="#">...Show More</a><span class="unhideme">'; for (var i = 3; i < words.length; i++) { htmlStr += words[i] + ' '; } htmlStr += '</span>'; $p.append(htmlStr); } }); $('p').on('click', 'a', function () { $(this).hide().next().show(); });

That 3 is hard-coded so you may want to change that. It basically represents how many items you want shown.

OR

If you want a plug-in to do all the dirty work for you check out trunk8 for jquery.

Collectives™ on Stack Overflow

How to select text after an element with jquery?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related