1

Given the following:

<div id="bigchuck">
 <p>blah blah blah.</p>
 <p>yada yada yada.</p>
 <p>Tada. Bing bong the witch is dead. Door bell.</p>
</div>

How can JavaScript/JQUERY find the last sentence "Door bell" and wrap it with a tag, to result in:

<div id="bigchuck">
 <p>blah blah blah.</p>
 <p>yada yada yada.</p>
 <p>Tada. Bing bong the witch is dead. <span>Door bell.</span></p>
</div>

Thank you

doug
  • 69,080
  • 24
  • 165
  • 199
WozPoz
  • 992
  • 2
  • 15
  • 29
  • if all you want is change the "Door bell" area. you can put a special tag with a assigned id, then you can do your manipulation against the Id – D.J Jul 19 '10 at 02:28
  • It's going to be dynamic, as the user is typing they can trigger this function, so I won't have an ID – WozPoz Jul 19 '10 at 03:04

3 Answers3

3

This solution is based on patrick's solution (he deserves the credit for coming up with the function(i,html) approach), but it just wraps the last sentence and not the space before it:

$('#bigchuck p:last').html( function(i,html) {
  var arr = html.split(". ");
  arr[arr.length-1]="<span>"+arr[arr.length-1]+"</span>";
  return arr.join(". ");
});

Here's the code in action.

Gert Grenander
  • 16,866
  • 6
  • 40
  • 43
  • 1
    Gert +1 Very nice. Using `.html( function() {} )` is just a shortcut. It's the guts of the function that matters. I like your solution better. :o) – user113716 Jul 19 '10 at 03:15
  • Thanks patrick. :) Well, I learned a new approach from you. I think that's the beauty with SO. You learn something new every day. :) – Gert Grenander Jul 19 '10 at 03:20
  • Gert - Indeed. I've acquired a good part of my jQuery knowledge here. – user113716 Jul 19 '10 at 03:25
  • @patrick - Same here. Earlier today I watched Scott Hanselman's "Social Networking for Developers" (http://ecn.channel9.msdn.com/o9/ch9/3/2/1/1/6/5/HanselminutesOn9SocialNetworkingForDevs1_ch9.wmv). He talked about - among other things - SO, Jon Skeet and how everyone needs at least three places in life. He also talked about how SO is a leap forward compared to the old discussion forums, where you have to dig through all the posts to find the answers. Sorry for going off-topic, but it's a good video and what he says about SO is very true. – Gert Grenander Jul 19 '10 at 03:49
  • Gert - Cool. Thanks for the link. I'll be sure to check it out. – user113716 Jul 19 '10 at 11:27
  • Challenge,,, After code runs it's moving the mouse cursor. Any ideas what would be doing that? And if there's a way to prevent it or put it back so the user can keep typing? – WozPoz Jul 20 '10 at 04:35
  • Another issue is that it's wrapping incorrectly it's doing:

    Blah Blah blah blah

    where the span should be before the . Are you seeing this too?     – WozPoz Jul 20 '10 at 04:42
  • @WozPoz - In which browser are you experiencing this? – Gert Grenander Jul 20 '10 at 09:18
2

try this:

var plast = $("#bigchuck").find("p:last").text();

var part = plast.split("."), pos = part.length - 2;
if (part.length < 2)
  pos = 0;

part[pos] = "<span>" + part[pos] + ".</span>";
part.pop(); // <-edit for comment

$("#bigchuck").find("p:last").html(part.join("."));
andres descalzo
  • 14,887
  • 13
  • 64
  • 115
  • You're ending up with an extra `.` at the end. I was originally having the same trouble with the final `.` being outside the span. – user113716 Jul 19 '10 at 03:17
2

Try this: http://jsfiddle.net/NpjUt/

$('#bigchuck p:last').html( function(i,html) {
    var arr = html.split(/(\.)/);
    arr.splice(arr.length - 3, 0, '<span>');
    arr.push('</span>')
    return arr.join('');
});

​

user113716
  • 318,772
  • 63
  • 451
  • 440
  • @patrick - I hope you don't mind me adding the second version. It will wrap just the text and not the space in front of the first word in the last sentence. – Gert Grenander Jul 19 '10 at 03:00
  • @Gert - It's a good solution. You should go ahead and add it as an answer. I'd vote for it! :o) – user113716 Jul 19 '10 at 03:02
  • @Gert - That is very gracious and considerate of you, but the solution is unique enough that it is really yours. I was stuck on the last `.` issue. Yours solves it nicely. I'm going to roll mine back, and will expect to see your answer shortly. :o) You can note that it builds off of mine if you prefer. – user113716 Jul 19 '10 at 03:08
  • @patrick - Thanks. :) But I still think you deserve upvotes for coming up with the `function(i,html)` approach. My first solution was way more bombastic. – Gert Grenander Jul 19 '10 at 03:16
  • @Gert - Yeah, passing a function was a nice addition to jQuery 1.4. Good thing about your solution is that it doesn't split on the last `.`, which was giving me a hard time. I didn't even think to add a space in there. Solves that issue perfectly and simplifies the code. – user113716 Jul 19 '10 at 03:23