Question

I would like to use JQuery to reorder all data that contains a certain word.The .find() framework works on elements as far as I can tell and not on items within the string.

The data is currently arranged like this:

    <div>A single zones 1,2 and 3 Tube ticket to £2.20</div>
<div>A single zones 1,2 and 4 Bus ticket to £2.20</div>
<div>A zones 1,2 and 3 Ferry ticket to £2.20</div>

I want to find if the DIV has the word ‘single’ in it and move it in after the zone data so that the ticket type reflects if it is single.

<script type="text/javascript">
    $(document).ready(function(){
        $('div').each(function(){
            if($(this).find('single')) {  };
        });
    });
</script>

I have got thus far. Obviously though that is not going to work. Any ideas?

EDIT this is what I would like the outcome to be:

<div>A zones 1,2 and 3 single Tube ticket to £2.20</div>
    <div>A zones 1,2 and 4 single Bus ticket to £2.20</div>
    <div>A zones 1,2 and 3 Ferry ticket to £2.20</div>

Answer 1

You can do something like this:

​$("div:contains(single)").html(function(i,currentVal) {
   return currentVal.replace(/single /,"")
                    .replace(/ (Tube|Bus|Ferry)/," single $1");
});​​​​​​​​​​​​​​​

Demo: http://jsfiddle.net/nnnnnn/R3V63/

This uses the ":contains" selector to find all divs that have the word “single”, and then uses the .html() method with the callback syntax that lets the individual values be processed one at a time where the supplied callback function will be passed the current html contents of each element and the return value becomes the new content.

To “move” the word “single” I’m first replacing it with an empty string, and then inserting it immediately before any of the words “Tube”, “Bus” or “Ferry”. Obviously if there is some other mode(s) of transport to be included the regex can be amended. Trying to find the right spot by matching on “Zones 1, 2 and 3” seemed too much hassle given the possible variations like “Zone 1”, “Zones 2 and 3”, etc.

See the doco on .replace() for more information.

EDIT: alternate regex to match on “Zones …” (not so much hassle after all):

.replace(/(zones?(?:[\d, ]|and)+) /,"$1 single ");

(seems to work fine: http://jsfiddle.net/nnnnnn/R3V63/4/)