wrap only text inside a span

Question

How can i wrap only the content present inside the span excluding the tags..

Here is the markup what i have...

<span class="foo">
   <span class="bar">+</span>
   lorem ispum lorem ispumlorem ispumlorem ispum
</span>

now this is what i want it to be

<span class="foo">
  <span class="bar">+</span>
  <span class="foobar">lorem ispum lorem ispumlorem ispumlorem ispum</span>
</span>

$('.foo').wrapInner('<span class="foobar"/>') is wrapping the entire inner content.\

thanks in advance..

possible duplicate of [Wrap text within element](http://stackoverflow.com/questions/13652140/wrap-text-within-element) — wirey00, Apr 21 '14 at 14:22

score 3 · Accepted Answer · answered Apr 21 '14 at 14:17

3

You have to filter nodes and then wrap. Use .each(). Try this:

$('.foo').each(function() {
    $(this).contents().eq(2).wrap('<span class="foobar"/>');
});

answered Apr 21 '14 at 14:17

Kiran

score 2 · Answer 2 · answered Apr 21 '14 at 14:16

2

You can filter out the text nodes and wrap them:

$('.foo').contents().filter(function() {
    return this.nodeType == 3 && $.trim(this.textContent) != '';
}).wrap('<span class="foobar" />');

answered Apr 21 '14 at 14:16

Jason P

score 1 · Answer 3 · answered Apr 21 '14 at 14:17

1

To Wrap the content Inside Tags you can use

 $('.foo').wrapInner('<span class="foobar"></span>');

answered Apr 21 '14 at 14:17

sshet

score 0 · Answer 4 · answered Apr 21 '14 at 14:22

0

You can use nextSibling to get the textNode, then just wrap it

$($('.bar').get(0).nextSibling).wrap('<span class="foobar" />')

answered Apr 21 '14 at 14:22

adeneo

4 Answers4