How to surround this text that does not have any HTML tags around it (with jQuery)?

Question

<span id="subscription-toggle" class="list:subscription"> &nbsp;|&nbsp; <!-- I want to surround this with a div with a class --> <span class="" id="subscribe-77" style=""> <a class="dim:subscription-toggle:subscribe-77:is-subscribed" href="http://localhost/taiwantalk2/topic/topic-with-two-tags-topic-with-two-tags-topic-with-two-tags/?action=bbp_subscribe&amp;topic_id=77&amp;_wpnonce=25988e5dac">Subscribe</a> </span> </span> 

So this should be the end result:

 <span id="subscription-toggle" class="list:subscription"> <div class="hide-this">&nbsp;|&nbsp;</div> <span class="" id="subscribe-77" style=""> <a class="dim:subscription-toggle:subscribe-77:is-subscribed" href="http://localhost/taiwantalk2/topic/topic-with-two-tags-topic-with-two-tags-topic-with-two-tags/?action=bbp_subscribe&amp;topic_id=77&amp;_wpnonce=25988e5dac">Subscribe</a> </span> </span> 

Answer 1

If the node text you want to wrap around a div is the only text node (i.e., this is the only text inside a subscription-toggle that is not inside another element), you can do this:

 $("#subscription-toggle").contents().filter(function() { return this.nodeType == 3; }).wrap("<div class='hide-this'></div>"); 

Here you can see an example.

Alternatively, if the span has multiple text nodes and you only want to wrap the characters | replace the filter body with this line:

return $(this).text().indexOf("|") != -1;

You can see an example of what works here .

Answer 2

I have not tested, but it should work:

 var subsc = $('#subscription-toggle'); subsc.html(subsc.html().replace('/(&nbsp;\|&nbsp;)/g', '<div class="hide-this">$1</div>')); 

Answer 3

You can achieve this using the jquery wrap function: http://api.jquery.com/wrap/

So you can search for  |  using :contains -Selector and use the wrap function.

Answer 4

What about:

$ ("# subscription toggle switch"). Before the name (function () {return $ (""). Append (this.childNodes [0]);});