Question

Here is my code:

<li class="det_price">
    <a href="/designer/customize/278258?dpid=1">Printing</a> from $10 
</li>

I have about fifteen chunks like this on any given page, and I’d like to take the text node (from $X), select X using a regular expression and set it to a numeric variable, then multiply it by a %, and append it to the original node. For example, if the original node said “from $10” I would like to replace it with “from $10 to $2.60”. I can do this using replace() and regular expressions on a single node, but I’m having trouble iterating through all of them with jQuery. Can I apply such a transformation to a jQuery object, or do I need to convert it somehow and then use standard Javascript functions?

Thanks!

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 <span>s, like this:

<li class="det_price">
  <a href="/designer/customize/278258?dpid=1">Printing</a><span> from $10</span>
</li>

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 <--