[JS] 현재 URL 주소값에 해당하는 메뉴들을 제어하기

Q) 현재 주소값 중 ID 와 CATEGORY 값을 체크하여, 만약 두 값 모두 있을 경우 해당 메뉴만 굵게, ID 값만 있을 경우 ID 에 해당하는 메뉴들 모두 굵게, 없을 경우 메뉴 전체를 굵게 처리를 하려면?

테스트를 위한 설정은 아래와 같습니다.
주소 : /localhost/?id=A&category=1
메뉴 :
<a href="/localhost/?id=A&category=1">메뉴A-1</a>
<a href="/localhost/?id=A&category=2">메뉴A-2</a>
<a href="/localhost/?id=A&category=3">메뉴A-3</a>
<a href="/localhost/?id=B&category=1">메뉴B-1</a>
<a href="/localhost/?id=B&category=2">메뉴B-2</a>

A) 이 경우 메뉴 A-1 만 굵게 되어야 하고, category 값이 없다면 id=A 에 해당하는 메뉴 모두 굵게 처리 하는 경우입니다.
현재 주소의 값중 id, category 가 어떤게 있는지 모르고 해당 값이 있냐 없냐에 따라 또 처리가 달라지기 때문에 복잡해 보이는 것이죠. 이게 복잡해 보이긴 해도 사실 간단히 해보면 단순합니다.

해결은, ① 현재 주소 값을 체크해서 ID 와 CATEGORY 값을 찾고, ② 이를 다시 정규식으로 만들어 ③ 각 메뉴 주소를 체크하면 됩니다.

우선 현재 주소 중에서 필요한 값을 체크하는 루틴을 짜보도록 하죠.
URL 중에서 각 값을 찾는 것은 split() 을 써서 분석해도 되겠지만, 그러면 코드가 너무 길어지기에 정규식을 이용해서 찾습니다.

/(id|category)=[\w]+/i

이를 이용해서 ID 와 CATEGORY 값을 찾고, 이를 바탕으로 메뉴 주소 체크를 위한 정규식을 만드는 루틴입니다.

var url = location.href,// 현재 URL 정보
    find = '*',// ID, CATEGORY 값이 없을 경우 모든 메뉴를 지칭하기 위해
    vars;

if ((vars = url.match(/(id|category)=[\w]+/gi))) {
    // 만들어진 정규식 예: /[\?&](id=A|category=1)/gi
    find = new RegExp('[\\?&]('+ vars.join('|') +')', 'gi');
}

나머지는 각 메뉴들의 주소를 체크하며 맞으면 굵게 처리하는 것만 남았습니다.
jQuery 를 안쓸 경우 for 를 이용해서 처리하면 됩니다. 이때 객체를 찾을 때는 부모 객체를 찾고 메뉴들을 <A> 테그 이름으로 찾으면 됩니다.

var menus = document.getElementById('menu_items').getElementsByTagName('A');
for (var n = 0, c = menus.length; n < c; n++) {
    bold = false;
    if (find === '*') bold = true;// ID, CATEGORY 값이 없을 경우 모든 메뉴를 굵게
    else if ((temp = menus[n].href.match(find))) {// 각 메뉴의 주소(href) 값을 체크
        // 현재 URL 에서 매칭된 ID, CATEGORY 갯수와 메뉴 주소에서 매칭된 값의 갯수가 같은지 확인
        // CATEGORY 는 같은 값이 여러개일 수 있으므로, ID 값을 체크하기 위해 갯수를 확인합니다.
        if (temp.length === vars.length) bold = true;
    }
    if (bold === true) menus[n].style.fontWeight = 'bold';
}

jQuery 를 이용할때도 위 루틴은 같습니다.

$.each(
    $('#menu_item > A'),
    function(idx, el) {
        var bold = false;
        if (find === '*') bold = true;
        else if ((temp = el.href.match(find))) {
            if (temp.length === vars.length) bold = true;
        }
        if (bold === true) el.style.fontWeight = 'bold';
    }
);

코드:

function checkMenu()
{
    var menus = document.getElementById('menu_item').getElementsByTagName('A'),
        url = location.href,
        find = '*',
        vars, temp;

    if ((vars = url.match(/(id|category)=[\w]+/gi))) {
        find = new RegExp('[\\?&]('+ vars.join('|') +')', 'gi');
    }

    for (var n = 0, c = menus.length; n < c; n++) {
        bold = false;
        if (find === '*') bold = true;
        else if ((temp = menus[n].href.match(find))) {
            if (temp.length === vars.length) bold = true;
        }
        if (bold === true) menus[n].style.fontWeight = 'bold';
    }

    return true;
}

예제:

/?id=A
/?id=A&category=2
/?id=B&category=1 등등...

메뉴 : 메뉴A-1 / 메뉴A-2 / 메뉴A-3 / 메뉴B-1 / 메뉴B-2