Comments on: Back to Basics

By: Steven Shaw

Steven Shaw — Mon, 31 Aug 2009 14:37:35 +0000

Is there a potential problem with your hasClass implementation when the element has no ‘class’ attribute and returns null. You’d have to be testing for a class called ‘null’.

Interesting exercise. Here’s what I have. I started with addClass and removeClass and then extracted hasClass from addClass. Didn’t know about the .className property so used getAttribute/setAttribute…

function hasClass(element, className) { var v = element.getAttribute('class'); return new RegExp("\\b" + className + "\\b").test(v); }


function addClass(element, className) {

  var v = element.getAttribute('class');

  if (v === null) {

    element.setAttribute('class', className);

  } else {

    if (!hasClass(element, className)) {

      element.setAttribute('class', v + ' ' + className);

    }

  }

}

function removeClass(element, className) { var v = element.getAttribute('class'); if (v === 'test') { element.removeAttribute('class'); } else { newVal = v.replace(new RegExp("[ ]\\b" + className + "\\b"), ''); element.setAttribute('class', newVal); } }

By: Eric

Eric — Fri, 28 Aug 2009 14:43:58 +0000

I’m not sure I’m understanding this right, but it seems to me that you can put escape sequences in CSS class names (http://www.w3.org/TR/CSS2/grammar.html). Those would interfere with the regexp. I think, to be on the safe side, the class name should be escaped before compiling the regexp:
/**
Returns a version of the string that is suitable for insertion in a regular expression as a literal value
@type String

*/
String.prototype.escapeRegexp = function () {
return(
this.replace(/\\/g,’\\\\’).
replace(/([.\$\^\{\[\|\]\}\*\+\?])/g,’\\$1′)
);
};

(Hey, great blog and great work, thanks for sharing!!!)

By: admin

admin — Sun, 23 Aug 2009 14:47:32 +0000

Not always apparently:

The trick is that if you write a document using an XML declaration and an XHTML doctype, then the CSS class names will be case sensitive for some browsers.

http://webdesign.about.com/od/css/f/blcssfaqcase.htm

Perhaps it would be better to leave the user the freedom make case sensitive searches for classNames.

By: Hozzy

Hozzy — Sun, 23 Aug 2009 14:36:03 +0000

Hi. What about case insensitivity? You examples don’t seem to care about case insensitivity! In CSS class “kiss” is the same as “KISS”.

By: admin

admin — Sun, 23 Aug 2009 01:13:14 +0000

Hi Matias,

Thanks for sharing your hasClass implementation Actually I don’t know which one is faster, I think that in most cases performance will be browser dependent, but since classNames are usually short names the regexp and indexOf methods might be quite similar in performance in “common” cases.

By: Matías Giovannini

Matías Giovannini — Sat, 22 Aug 2009 19:06:40 +0000

Nicolás, all good points. The “basic” nature of Javascript is both a blessing and a curse to beginners and experienced practitioners alike. It is perhaps inevitable, certainly expected to see homegrown utility libraries become full-fledged “products”.

With respect to hasClass(), seeing that you’re not loathe to use regular expressions for removeClass(), I’d prefer using a word-boundary matching adverb instead of padding with spaces:

# function hasClass(domElement, className) {
# return !!domElement.className.match(“\\b” + className + “\\b”);
# }

which if not as fast as using indexOf is to me a bit clearer.