정규식 그룹에 대한 값이 없을 때 각 브라우저의 값

발생일: 2011.01.03

문제:
마크업의 클래스 값을 구분해 탭의 인덱스를 가져오는 스크립트를 작성했다.

탭의 클래스 이름은 각각 "tab", "tab2", "tab3" 와 같은 식으로 구성되어 있으며 아래와 같이 가져와서 사용했다.

function getTabIndex(className) {

var reg = /tab(\d)?/;

var index = reg.exec(className)[1];

return index - 1 || 0; // 값이 없을 경우, index - 1 이 NaN 을 기대함.

}

헌데, 클래스명이 "tab" 일 경우, FF 에서는 기대했던 대로 결과값이 0이 리턴되었지만, IE 에서는 -1 이 리턴된다.

해결책:

정규식에서 그룹에 대한 정규식 매칭 결과가 없을 때 브라우저 별 결과값이 다르다.

// 그룹에 대한 정규식 매칭 결과가 없을 때 브라우저별 결과값이 다르다.

var reg = /ab(c)?/;

var s = "ab";

var result = reg.exec(s);

var group1 = result[1]; // (c) 에 해당하는 group1 값을 가져오도록 하며 이 값은 존재하지 않는다.

alert(result.length); // 결과 값에 대한 배열의 길이는 브라우저와 그룹 값 존재여부에 관계없이 2를 리턴한다. 

alert(group1); // IE: 공백(empty), FF 및 그 외: undefined 

alert(typeof group1); // IE: string, FF 및 그 외: undefined 

위의 문제에서는 if (group1) 과 같은 식으로 걸러 사용하면 된다.