How to add a span wrap with jQuery around text that has line breaks in it?

Question

I'm making a bookmarklet and have gotten a bit stuck, I'm trying to wrap a span around some text. Problem is the text has a fair amount of brs in it which is causing me a headache.

Since its a bookmarklet I can only use jQuery to change the HTML. I only want to wrap the text below the mediablock (so I can truncate it) and not the mediablock itself.

Current HTML Structure below:

<div class="Message">

  <div class="MediaBlock">
    <h2>name</h2>
  </div>

  This is the text
  <br> I want to wrap
  <br> With a span, class more &nbsp

</div>

I should have mentioned that along with br's there are links as well, also their are multiple message containers on one page.

The message is also variable length, its user generated

Please add your code to show us what you have tried. – ahren May 24 '13 at 02:12 — ahren, May 24 '13 at 02:12

score 2 · Answer 1 · answered May 24 '13 at 02:15

2

$('.Message').contents().filter(function(i) {
    return (this.nodeType === 3 || this.nodeName.toLowerCase() === 'br') && i!=0;
}).wrapAll('<span />');

FIDDLE

answered May 24 '13 at 02:15

adeneo

312,895
29
395
388

For some reason this worked on the last container but on the others it removed the text. thanks for the response – user2415861 May 24 '13 at 02:31
@user2415861 - getting stray textNodes with javascript takes a little finessing, and any solution will be really dependant on the markup, so you really can't expect a "one solution fits all" thing for this, you'll hvae to build it to match the exact markup you have. – adeneo May 24 '13 at 02:41

How to add a span wrap with jQuery around text that has line breaks in it?

1 Answers1