Improve on Regex replacing classnames I am working on a small script for a mobile site.
Is there any way to improve on the regex here? or remove it completely?

function fn_page_change(event) {
    event.preventDefault();
    var activePage = $(".ui-active");
    var newPage = $(event.target.getAttribute("href"));
    activePage.className = activePage.className.replace(/(?:^|\s)ui-active(?!\S)/, " ui-inactive ");
    newPage.className = newPage.className.replace(/(?:^|\s)ui-inactive(?!\S)/, " ui-active");
}


I'm not using jQuery, the $ is myown

function $(selector, el) {
    if (!el) {
        el = document;
    }
    var tmp = el.querySelectorAll(selector);
    if (tmp.length === 1) {
        return tmp[0];
    }
    return tmp;
}


Here is an example
You will have less code if you use a regex because you need the word boundary detection that is built into regex.  I'd suggest putting it in a utility function to make it cleaner and more readable:

function replaceClass(el, oldClass, newClass) {
    el.className = el.className.replace(new RegExp("\\b" + oldClass + "\\b"), newClass);
}

function fn_page_change(event) {
    event.preventDefault();
    var activePage = $(".ui-active");
    var newPage = $(event.target.getAttribute("href"));
    replaceClass(activePage, "ui-active", "ui-inactive");
    replaceClass(newPage, "ui-inactive", "ui-active");
}


If you wanted a version of replaceClass() that would handle either of the types of return values you get out of your selector function (single DOM object or array of DOM objects), then you could use this:

function replaceClass(el, oldClass, newClass) {
    var re = new RegExp("\\b" + oldClass + "\\b");
    if (el.nodeType) {
        el.className = el.className.replace(re, newClass);
    } else {
        for (var i = 0; i &lt; el.length; i++) {
            el[i].className = el[i].className.replace(re, newClass);
        }
    }
}