How to surround this text that hasn't 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 final 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 text node you wish to wrap your div around is the only text node (i.e. it's the only text inside subscription-toggle that is not inside another element) then you can do this:

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

You can see an example here.

Alternatively, if there are multiple text nodes in the span, and you only want to wrap | characters, replace the body of the filter function with this line:

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

You can see an example of that one working here.

Answer 2

I haven't tested but it should work:

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