Parse class values: Retrieving custom meta data from an HTML element's class name

The problem

I had HTML that had class information on each object that signified how deeply it was indented (e.g. "indent-5"). I needed to use the value of the indent to make various comparisons in another. To solve this problem I created a simple utility function.

NOTE: All functions were written with a dependancy on jQuery.


I created an array of the object's classes by splitting the string at the instance of a space. I made the assumption that the indent class would always be the first and accessed the first element of the object class array I created. I then took this string and removed the "indent-" part and parsed the rest as an integer. The result was an integer I could use for numeric comaprisons in my main function.

function parseObjLevelNumber(obj) {
  var objClass = $(obj).attr("class");
  var objClassArray = new Array();
  objClassArray = objClass.split(" ");
  var objLevel = parseInt(objClassArray[0].replace(/indent-/, ""));
  return objLevel;

Revision 1 - RegEx

When I looked at my code again I realized that my original function could be made more generic so that it could be a general purpose utility function. Since the new function could not assume an object class array position or the string that should be removed I made these two values arguments to the function.

When first writing this I ran into a minor problem when trying to use the RegEx string as a normal string. Apparently you need to convert a string into a RegEx variable if you want it to be used as a variable.

    function parseClassValueRegEx(obj, pos, attrName) {
        var objClassArray = $(obj).attr("class").split(" ");
        var attrNameRegEx = new RegExp(attrName);
        var classValue = objClassArray[pos].replace(attrNameRegEx, "");
        return classValue;

Revision 2 - JSON

As much as the RegEx version of the function was better it still forced one to make assumptions about what position in the array the item you wanted was. I removed position as an argument and tried to find a way one could access the class attribute by name. For example if you wanted the "indent" level of an object you would only need to ask for "indent."

I decided that the best way to do this would be to create a JSON object that contains all the class attributes a element has.

I first set up my empy JSON array. I then loop through the values in the object's class array (e.g. "indent-1") and I split those values against the "-" to create another array called "keyValue." Then I push values into the JSON array with the assumption that the prefix, "[0]," will always be the key and the suffix, "[1]," will always be the value.

    function parseClassValue(obj, attrName) {
        var objClassArray = $(obj).attr("class").split(" ");
        var objClassValues = { };
        for (var i in objClassArray) {
            var keyValue = objClassArray[i].split("-");
            objClassValues[keyValue[0]] = keyValue[1];
        var classValue = objClassValues[attrName];
        return classValue;