How can I get, manipulate and replace a text node using jQuery?

Question

Here is my code:

    Printing from $10 

Answer 1

Here's how to select a text node.

Here's (the skeleton of) what you do once you've got 'em:

$('li.det_price').contents().filter(function()
{ 
    return this.nodeType == 3;
}).text(function (i, text)
{
    return text.replace(/* your schtuff here */);
});

---

So apparently jQuery doesn't play that nicely with text nodes

Time to get (a little) hacky:

var rnotwhite = /\S/; // to omit text nodes that are solely white space
                      // tweak this as needed
$('li.det_price').contents().filter(function()
{ 
    return this.nodeType === 3 && rnotwhite.test($(this).text());
}).text(function (i, text)
{
    this.replaceWholeText(text + ' replaced');
    // or, for more cross-browser-ness
    // this.nodeValue = text + ' replaced';
});

--> Check out this sweet demo <--

--> IE-compatible demo here <--

Now here's the deal: if you have control of the markup, the best solution for this is to wrap the text nodes you're actually interested in, in s, like this:

  Printing from $10

and then you can just do this (way less sketch, IMO):

$('li.det_price > a + span').text(function (i, text)
{
    return text + ' replaced';
});

--> More demo goodness <--