Style on Last Words

Question

I have a long list of <li>s. A piece of JQuery code below helps me to style the last words of each <li>. Please take a look here

The issue now is I don't want it apply the style to the last <li>.

Could could I do that?

Here is my whole code. Please take a look

<html>

<script>
   $(document).ready(function(){
       $('li').each(function(){
       var $this = $(this), text=$this.text().trim(), words = text.split(/\s+/);
       var lastWord = words.pop();
       words.push('<span class="Red">' + lastWord + '</span>');
       $this.html(words.join(' '));
   });
});
</script>
<style>
.Red{color:red}
</style>
<body>
<li>my holy tag galore</li>
<li>my sandwich is balloney</li>
<li>the expected is not to be </li>
<li>oh REALLY? </li>

<script type="text/javascript" src="JQuery-1.10.2.js"></script>

</body>
</html>

Thank you very much!

place your code on [fiddle](http://fiddle.jshell.net/) please — Shirin Abdolahi, Sep 23 '13 at 07:28

score 0 · Answer 1 · edited May 23 '17 at 12:11

0

The only problem I see is your "Red" and "Bold" classes might not really be defined actually. I've tested your code myself and it works just fine - it adds the said classes to the last word.

However, just to keep it simple (um, alright ... for the RegEx's sake) you could use the replace function, just like this:

$('li').click(function(){
    var $t = $(this);
    $t.html($t.text().trim().replace(/(\w+)[.!?]?\s*$/, "<b>$1</b>"));
});

It surrounds the last word with <b></b> tags. Just replace them with whatever you like. The click event is also for the sake of testing, you can always change it to each function or anything else, really.

Here's a break down on how this RegEx actually works:

https://stackoverflow.com/a/3648147/1368043

edited May 23 '17 at 12:11

Community

1
1

answered Sep 22 '13 at 23:20

Tomalla

567
1
6
17

Thank you very much! But poor me, it doesn't work on me. Here is the whole code:
I need some help

abcid d

Sep 23 '13 at 02:38

Mate, you're not making it any easier on me this way ... if you want to add some code, edit your original post, just look at this - it's a mess. If you want anybody to help you, you need to help them first. – Tomalla Sep 23 '13 at 09:43

Please tell me, how is it not working: http://codepen.io/anon/pen/CbJtu I'm telling you, your code works just fine, if it's not working for you, then provide us a **live** example where it does not, in a fiddle for example. – Tomalla Sep 23 '13 at 09:55

Thank you. When the page is loaded, the red color should show up right away (don't need to click on the button). I just tried the buttons in the link you provided. How can I get it work without hitting the button? Please give me a hand. Thank you! – abcid d Sep 23 '13 at 15:31

I ... I don't know what to say. I have this feeling as if you were living in your own world. Your code in the original post is 100% correct and if you are not able to modify the code I gave to you to accommodate your task, maybe you shouldn't have started fiddling around with JavaScript in the first place? – Tomalla Sep 23 '13 at 15:40

Hello Tomalla, I got it works now. Please take a look [link](http://codepen.io/anon/pen/CbJtu). The issue right now is I don't want it apply to the last `

`, how could I do that?

– abcid d Sep 24 '13 at 16:46

Style on Last Words

1 Answers1