자바 스크립트의 복잡한 URL 정규식

Question

아약스 웹 사이트를 만들고 있는데 jquery의 .load()을 사용하여 페이지를로드하고 있습니다. 탐색 모음의 링크를 클릭하면 잘 작동하고 새 페이지가로드되지만 다시로드하면 방금 페이지를 잃어 버리게됩니다. 따라서 계정을 볼 때 페이지를 새로 고침하면 나를 다시 홈페이지로 보낼 것입니다. 수정하기는 쉽지만 실제 문제는 검색하거나 프로필을로드 할 때입니다. 내 검색 URL은 http://mysite.com/#!/search/option1/query here/입니다. 여기에 간단한 정규식을 만들었지 만, 내가 사용하고있는 코드로 그 정규식을 사용하려고 할 때, 그들은 섞지 않는다. 내 프로필 URL은 http://mysite.com/#!/profile/person here/입니다. 어떻게이 모든 것을 수용 할 수있는 정규 표현식을 만들 수 있습니까? 첫 번째 옵션 (/ account /,/search /,/newsfeed /)을 필터링하고 두 번째 및 세 번째 옵션에 따라 콘텐츠를로드 한 다음 페이지를로드해야합니다. Heres는 코드 내가 사용하고 : 어떤 옵션이 없기 때문에

---

var oldLoc = window.location.hash.replace(/^#\!/,""); 
var m = /(\/search\/)([^\/]+\/)([^\/]+)/.exec(oldLoc); 

if (oldLoc == '/newsfeed/') { 
    $('#reload_section').load('newsfeed.php'); 
    $('.nav_itm.home').removeClass('active'); 
    $('.nav_itm.account').removeClass('active'); 
    $('.nav_itm.newsfeed').addClass('active'); 
    _currentScreen = 4; 
} else if (oldLoc == '/account/') { 
    $('#reload_section').load('account.php'); 
    $('.nav_itm.home').removeClass('active'); 
    $('.nav_itm.account').removeClass('active'); 
    $('.nav_itm.newsfeed').removeClass('active'); 
    _currentScreen = 5; 
}/*else if (m[1]) { 
    $('#reload_section').load('search.php'); 
    $('.nav_itm.home').removeClass('active'); 
    $('.nav_itm.account').removeClass('active'); 
    $('.nav_itm.newsfeed').removeClass('active'); 
    _currentScreen = 6; 
    if (m[2] == 'option1/') { // Option1 Search 
     searchMenuId = 1; 
     $('.cquery .option1').addClass('active'); 
     $('.cquery .option2').removeClass('active'); 
     $('div.live h1 b').text(m[2]); 
    } else if (m[2] == 'option2/') { // Option2 Search 
     searchMenuId = 2; 
     $('.cquery .option1').removeClass('active'); 
     $('.cquery .option2').addClass('active'); 
     $('div.live h1 b').text(m[2]); 
    } 
} */else { 
    $('#reload_section').load('main.php'); 
    $('.nav_itm.home').addClass('active'); 
    $('.nav_itm.account').removeClass('active'); 
    $('.nav_itm.newsfeed').removeClass('active'); 
    _currentScreen = 1; 
} 

---

그 코드가 http://mysite.com/#!/newsfeed/ 같은 고정 된 페이지 URL에 완벽하게 작동합니다. 그것이 가능하다면 정규 표현식을 처리하기 위해 그것을 어떻게 수정합니까? 나는 확실하지 않지만 너무 많이 묻는가? 나는 PHP URL 라우팅을 사용하지 않는 것을 선호하지만, 자바 스크립트가 내가 원하는 것을 할 수 없다면, 나는해야 할 수도있다. 어떤/모든 도움을 주셔서 대단히 감사합니다. 나는 여기서 많은 것을 묻고있다. 무엇을 당신이하려는 것은 # 결국 다양한 옵션을 얻을 수있는 URL을 구문 분석하는 경우

Answer 1

!, 당신은 다음과 같은 코드를 사용할 수 있습니다

var str = "http://mysite.com/#!/search/option1/query here/"; 
var options; 
var pos = str.indexOf("#!"); 
if (pos != -1) { 
    options = str.substr(pos + 2).replace(/^\/|\/$/g, "").split("/"); 
    console.log(options); // ["search", "option1", "query here"] 
} 

당신이 여기서 일 볼 수 있습니다 http://jsfiddle.net/jfriend00/e9a5V/를

그런 다음 옵션 배열을 적절하게 처리 할 수 ​​있습니다. 아닌되는 '정의되지 않은'

switch(options[0]) { 
    case "search": 
     // code to handle search here 
     // additional options are in options[1], options[2] ... 
     // up to options[options.length - 1] 
     break; 

    case "profile": 
     // code to handle profile here 
     // additional options are in options[1], options[2] ... 
     break; 

    case "newsfeed": 
     // code to handle newsfeed and options here 
     // additional options are in options[1], options[2] ... 
     break; 

    default: 
     // code to handle unexpected URL form here 
}