Looking back on my Github repos, I came across an interesting artifact of my web development journey, JavaScript Split.

One of my first assignments after joining UC Santa Cruz was to apply special styles to certain words (a, and, the, of, mostly) in the primary headings (<h1> elements) on UC Santa Cruz’s web network, which in 2018 was the Cascade CMS (we’ve since migrated to WordPress).

As a WordPress developer, my strength has been PHP. I’d used the JQuery library on occasion but JavaScript was a “second language” to me (that I am still learning), so I had my work cut out.

This bit of code searches for certain words in an array and, if found, wraps them in <span> elements with a custom class, enabling them to be styled all fancy-like.

Looking at this code today and knowing what I know now, I’d have likely written it differently. On the other hand, it is still in use today so, if it ain’t broke, why fix it?

But it’s fun to look back and measure one’s progress so I thought i’d throw it up here for posterity. Maybe somebody else can learn from it, too.

Doin’ the splits

(function() {
    var heading = document.querySelector('.secondary-name a').innerHTML;
    var split = heading.split(" ");
    var words = ["of", "Of", "and", "And", "is", "Is", "she", "She"];

    for (var i = 0; i < split.length; i++) {
        for (var j = 0; j < words.length; j++) {
            if (split[i] == words[j]) {
                split[i] = "<span class='connector'>" + split[i] + "</span>";
            }
        }
    }

    var newHeading = split.join(' ');

    document.querySelector('.secondary-name a').innerHTML = newHeading;
})();Code language: JavaScript (javascript)

Check out my codepen to see it in action.