Javascript에서 QueryString 해석하기(Parsing)

URL을 통해 넘겨받은 QueryString을 자바스크립트에서 해석하는 코드입니다.

function parseQueryString() {
    let str = location.href;
    let index = str.indexOf("?") + 1;
    let lastIndex = str.indexOf("#") > -1 ? str.indexOf("#") + 1 : str.length;
 
    if (index == 0) return;
 
    str = str.substring(index, lastIndex).split("&");
 
    let result = {};
    let count = str.length;
    for (let i = 0; i < count; i++) {
        let keyValue = str[i].split("=");
        if (keyValue.length != 2) {
            break;
        }

        result[keyValue[0]] = keyValue[1];
    }

    return result;
}

결과는 key와 value를 갖는 자료구조로 반환됩니다. 즉, 자바스크립트의 obect 타입입니다.

처리해야 할 공백 문자가 있다면, 꼭 고려해야 할 ‘ZERO WIDTH SPACE’

Code 값 32는 가장 흔히 볼 수 볼 수 있는 공백문자. 160도 공백문자인데, nbsp(Non-breaking Space) 문자라고 한다. 여기에 하나더 Code 값 8203이 있는데 이 값 역시 공백문자이다. 그런데 공백을 차지 하지 않는 공백문자, ‘ZERO WIDTH SPACE’라고 한단다. 보이지 않는 공백문자, 다른 말로 공백이 아닌 공백 문자이다. 참고로 유니코드 문자셋이다.

아래의 코드는 Javascript에서 Space 문자를 제거하는 코드이다.

let address = '공백 문자를 포함하는 문장';
let arrAddress = [];
for (let i = 0; i < address.length; i++) {
    let charCode = address.charCodeAt(i);
    if (charCode === 8203 /* Unicode Character 'ZERO WIDTH SPACE' */ || 
        charCode === 160 /* nbsp(non-breaking space) */ || 
        charCode === 32 /* Space */) {
        // skips all space chars
    } else {
        arrAddress.push(address[i]);
    }
}
address = arrAddress.join("");

이 글에서 언급하는 Space 문자로 3개 언급했는데.. 또 있다면 코드에 반영해야 할 것이다. 참고로 Javascript에서 문자열의 실행중 변경은 배열을 사용해야 한다. 즉, Java의 StringBuilder의 용도와 동일하다.