javascript - 如何从 URL 中的哈希中获取搜索查询

Question

我正在添加一个搜索功能，如果用户在搜索结果中并且他们刷新了页面，我希望它停留在该搜索中。我已经将搜索查询放入 URL，但我不知道如何检索它。它很可能需要一个正则表达式，所以任何对正则表达式有经验的人，请帮忙。

这是我将其放入 URL 的方式:

function trimspace(str) {
    str = str.replace(/ +(?= )/g, '');
    return str;
}
function searchMail() {
    var query = trimspace($('#search_input').val());
    if (query == '' || !query || query == null) {
        $('#search_input').focus();
    }
    else {
        window.location.hash = '#!/search/' + query;
        $('#loader').show();
        $.get('tools.php?type=search', { q: query }, function(data, textStatus) {
            $('#loader').hide();
            if (textStatus == 'success') {
                hideAllTabs();
                $('#search_results').html(data).show();
                document.title = "Search results - WeeBuild Mail";
            }
            else {
                alertBox('Search failed. Please try again in a few minutes.', 2500);
            }
        });
    }
}

除了检索查询之外，我还需要能够检测哈希是否为 #!/search/query。

提前致谢!

Answer 1

检测查询是否为#!/search/query:

location.hash==='#!/search/query'

假设查询是 #!/search/query 找出查询部分:

var parts = location.hash.split('/');

parts[0] 是 #!。 parts[1] 是search，parts[2] 是test。处理您想要的部分现在应该已经足够简单了。

回应评论:

function getPartAndRemainder(){
    var parts = location.hash.split('/');
    if(parts[0]!=='#!' || parts.length<2){
        // Value after # does not follow the expected pattern #!/part/any_parameters
        throw new Error('Cannot parse application part.');
    }
    return {
        // Contains the part of your application (word after first slash after #)
        part: parts[1],
        // Contains everything after second slash after # or the empty string
        remainder: location.hash.substring(
            // Length of #! (or whatever somebody might use instead)
            parts[0].length
            // Length of first slash
            +1
            // Length of your application part's name
            +parts[1].length
            // Length of the second slash
            +1)
    };
}

该函数返回一个对象，该对象包含键 part 处的应用程序部分，remainder 键将包含其余部分。因此，如果您的 URI 是 something#!/search/test，该函数将返回 {part:'search', remainder:'test'}。 如果无法解析 URI，您将收到错误消息，然后您应该改用合理的默认值。

每当哈希发生变化或在您对哈希值感兴趣的某个其他事件(时间点)时，您将使用如下方法:

try {
    var hashValue = getPartAndRemainder();
    if(hashValue.part==='search'){
        var query = hashValue.remainder;
        alert('You searched: '+query)
    }
    if(hashValue.part==='inbox'){
        alert('You are in inbox, now');
    }
} catch(e){
    // It was not possible to parse the value after the # from URI according to our expected pattern.
    alert('No idea what to do with: '+location.hash);
}