Previous Page
Next Page

Replacing Elements using Regular Expressions

You've already seen how useful regular expressions are for finding, matching, and replacing strings. But you can also use them to replace the names of page elements, and this can often save you a bunch of time. In this task, we're going to retrofit a regular expression into a script that you've seen before, Script 4.5. That script built three-state rollovers. It's a useful script, but it has one drawback: it requires you to have tagged every image that you want to manipulate with its own id. That's not too difficult, but you can instead use JavaScript to build the names of page elements and save you some work.

At this point, you should review Scripts 4.4 and 4.5 to see what's going on in this example. Go ahead, we'll wait.

Back so soon? Great. In short, instead of creating the _click and _on names of an image on the fly based on the id of each image, we're instead creating the _click and _on names on the fly based on the _off name of the image. That way, we don't even need the image ids. Script 8.8 shows you the way. There's no change in the way the page looks or acts from changing the JavaScript; but it saves you work in creating the HTML pages.

Script 8.8. Use regular expressions to save you from writing or retrofitting your HTML files.

window.onload = rolloverInit;

function rolloverInit() {
     for (var i=0; i<document.images.length; i++) {
        if (document.images[i].parentNode. tagName == "A") {
           setupRollover(document.images[i]);
        }
     }

}

function setupRollover(thisImage) {
     var re = /\s*_off\s*/;

     thisImage.outImage = new Image();
     thisImage.outImage.src = thisImage.src;
     thisImage.onmouseout = rollOut;

     thisImage.clickImage = new Image();
     thisImage.clickImage.src = thisImage.src. replace(re,"_click");
     thisImage.onclick = rollClick;

     thisImage.overImage = new Image();
     thisImage.overImage.src = thisImage.src. replace(re,"_on");
     thisImage.onmouseover = rollOver;

}

function rollOver() {
     this.src = this.overImage.src;
}

function rollOut() {
     this.src = this.outImage.src;
}

function rollClick() {
     this.src = this.clickImage.src;
}

To use a regular expression to replace an element:

1. 
var re = /\s*_off\s*/;



This line sets up a new regular expression pattern that looks for the text _off anywhere in a string.

2. 
thisImage.clickImage.src = thisImage.src.replace(re,"_click");



The line in Script 4.5 was thisImage. clickImage.src = "images/" + thisImage.id + "_click.gif"; The new line uses the re pattern to look for that particular bit of a string and, when it's found, replace it with this string. In this case, we're looking for _off and turning it into _click. This allows us to not worry about the id attribute being set on this imageit just doesn't matter any more.

3. 
thisImage.overImage.src = thisImage. src.replace(re,"_on");



The line in Script 4.5 was thisImage. overImage.src = "images/" + thisImage.id + "_on.gif";. In this case, we're looking for _off and turning it into _on.

Tip

  • This can also be handy if your images are a mixture of GIF and JPEG filesnow, your JavaScript code doesn't have to ever know what suffix each image has.



Previous Page
Next Page