javascript/jquery thêm dấu gạch chéo vào url (nếu không có)

Question

Tôi đang tạo một ứng dụng web nhỏ trong đó người dùng nhập URL máy chủ mà từ đó nó tải một tải dữ liệu với yêu cầu AJAX.

Vì người dùng phải nhập URL theo cách thủ công, mọi người thường quên dấu gạch chéo, mặc dù nó được yêu cầu (vì một số dữ liệu được nối vào url được nhập). Tôi cần một cách để kiểm tra xem dấu gạch chéo có hiện diện hay không, và nếu không, hãy thêm nó.

Điều này có vẻ như một vấn đề mà jQuery sẽ có một lớp lót cho, không ai biết làm thế nào để làm điều này hoặc tôi nên viết một hàm JS cho nó?

Answer 1

var lastChar = url.substr(-1); // Selects the last character 
if (lastChar != '/') {   // If the last character is not a slash 
    url = url + '/';   // Append a slash to it. 
} 

Tên biến tạm thời có thể được bỏ qua, và trực tiếp nhúng trong sự khẳng định:

if (url.substr(-1) != '/') url += '/'; 

Vì mục tiêu đang thay đổi url với một lớp lót, giải pháp sau đây cũng có thể được sử dụng:

url = url.replace(/\/?$/, '/'); 

• Nếu dấu gạch chéo tồn tại, nó được thay thế bằng /.
• Nếu dấu gạch chéo không tồn tại, / được nối vào cuối (chính xác: Dấu neo được thay thế bằng /).

Answer 2

Bạn có thể làm một cái gì đó như:

var url = 'http://stackoverflow.com'; 

if (!url.match(/\/$/)) { 
    url += '/'; 
} 

Đây là bằng chứng: http://jsfiddle.net/matthewbj/FyLnH/

Answer 3

tôi thêm vào dung dịch regex để chứa các chuỗi truy vấn:

http://jsfiddle.net/hRheW/8/

url.replace(/\/?(\?|#|$)/, '/$1') 

Answer 4

url += url.endsWith("/") ? "" : "/" 

Answer 5

Trước khi tìm câu hỏi này và đó là câu trả lời tôi đã tạo ra cách tiếp cận của riêng mình. Tôi đăng nó ở đây vì tôi không thấy một cái gì đó tương tự.

function addSlashToUrl() { 
    //If there is no trailing shash after the path in the url add it 
    if (window.location.pathname.endsWith('/') === false) { 
     var url = window.location.protocol + '//' + 
       window.location.host + 
       window.location.pathname + '/' + 
       window.location.search; 

     window.history.replaceState(null, document.title, url); 
    } 
} 

Answer 6

Không phải mọi URL đều có thể hoàn tất bằng dấu gạch chéo ở cuối. Có ít nhất một số điều kiện không cho phép một điều kiện:

• Chuỗi sau dấu gạch chéo cuối cùng hiện tại giống như index.html.
• Có các tham số: /page?foo=1&bar=2.
• Có liên kết đến đoạn: /page#tomato.

Tôi đã viết chức năng để thêm dấu gạch chéo nếu không có trường hợp nào ở trên có mặt. Ngoài ra còn có hai chức năng bổ sung để kiểm tra khả năng thêm dấu gạch chéo và để ngắt URL thành các phần. Người cuối cùng không phải của tôi, tôi đã đưa ra một liên kết đến bản gốc.

const SLASH = '/'; 
 

 
function appendSlashToUrlIfIsPossible(url) { 
 
    var resultingUrl = url; 
 
    var slashAppendingPossible = slashAppendingIsPossible(url); 
 

 
    if (slashAppendingPossible) { 
 
    resultingUrl += SLASH; 
 
    } 
 

 
    return resultingUrl; 
 
} 
 

 
function slashAppendingIsPossible(url) { 
 
    // Slash is possible to add to the end of url in following cases: 
 
    // - There is no slash standing as last symbol of URL. 
 
    // - There is no file extension (or there is no dot inside part called file name). 
 
    // - There are no parameters (even empty ones — single ? at the end of URL). 
 
    // - There is no link to a fragment (even empty one — single # mark at the end of URL). 
 
    var slashAppendingPossible = false; 
 

 
    var parsedUrl = parseUrl(url); 
 

 
    // Checking for slash absence. 
 
    var path = parsedUrl.path; 
 
    var lastCharacterInPath = path.substr(-1); 
 
    var noSlashInPathEnd = lastCharacterInPath !== SLASH; 
 

 
    // Check for extension absence. 
 
    const FILE_EXTENSION_REGEXP = /\.[^.]*$/; 
 
    var noFileExtension = !FILE_EXTENSION_REGEXP.test(parsedUrl.file); 
 

 
    // Check for parameters absence. 
 
    var noParameters = parsedUrl.query.length === 0; 
 
    // Check for link to fragment absence. 
 
    var noLinkToFragment = parsedUrl.hash.length === 0; 
 

 
    // All checks above cannot guarantee that there is no '?' or '#' symbol at the end of URL. 
 
    // It is required to be checked manually. 
 
    var NO_SLASH_HASH_OR_QUESTION_MARK_AT_STRING_END_REGEXP = /[^\/#?]$/; 
 
    var noStopCharactersAtTheEndOfRelativePath = NO_SLASH_HASH_OR_QUESTION_MARK_AT_STRING_END_REGEXP.test(parsedUrl.relative); 
 

 
    slashAppendingPossible = noSlashInPathEnd && noFileExtension && noParameters && noLinkToFragment && noStopCharactersAtTheEndOfRelativePath; 
 

 
    return slashAppendingPossible; 
 
} 
 

 
// parseUrl function is based on following one: 
 
// http://james.padolsey.com/javascript/parsing-urls-with-the-dom/. 
 
function parseUrl(url) { 
 
    var a = document.createElement('a'); 
 
    a.href = url; 
 

 
    const DEFAULT_STRING = ''; 
 

 
    var getParametersAndValues = function (a) { 
 
    var parametersAndValues = {}; 
 

 
    const QUESTION_MARK_IN_STRING_START_REGEXP = /^\?/; 
 
    const PARAMETERS_DELIMITER = '&'; 
 
    const PARAMETER_VALUE_DELIMITER = '='; 
 
    var parametersAndValuesStrings = a.search.replace(QUESTION_MARK_IN_STRING_START_REGEXP, DEFAULT_STRING).split(PARAMETERS_DELIMITER); 
 
    var parametersAmount = parametersAndValuesStrings.length; 
 

 
    for (let index = 0; index < parametersAmount; index++) { 
 
     if (!parametersAndValuesStrings[index]) { 
 
     continue; 
 
     } 
 

 
     let parameterAndValue = parametersAndValuesStrings[index].split(PARAMETER_VALUE_DELIMITER); 
 
     let parameter = parameterAndValue[0]; 
 
     let value = parameterAndValue[1]; 
 

 
     parametersAndValues[parameter] = value; 
 
    } 
 

 
    return parametersAndValues; 
 
    }; 
 

 
    const PROTOCOL_DELIMITER = ':'; 
 
    const SYMBOLS_AFTER_LAST_SLASH_AT_STRING_END_REGEXP = /\/([^\/?#]+)$/i; 
 
    // Stub for the case when regexp match method returns null. 
 
    const REGEXP_MATCH_STUB = [null, DEFAULT_STRING]; 
 
    const URL_FRAGMENT_MARK = '#'; 
 
    const NOT_SLASH_AT_STRING_START_REGEXP = /^([^\/])/; 
 
    // Replace methods uses '$1' to place first capturing group. 
 
    // In NOT_SLASH_AT_STRING_START_REGEXP regular expression that is the first 
 
    // symbol in case something else, but not '/' has taken first position. 
 
    const ORIGINAL_STRING_PREPENDED_BY_SLASH = '/$1'; 
 
    const URL_RELATIVE_PART_REGEXP = /tps?:\/\/[^\/]+(.+)/; 
 
    const SLASH_AT_STRING_START_REGEXP = /^\//; 
 
    const PATH_SEGMENTS_DELIMITER = '/'; 
 

 
    return { 
 
    source: url, 
 
    protocol: a.protocol.replace(PROTOCOL_DELIMITER, DEFAULT_STRING), 
 
    host: a.hostname, 
 
    port: a.port, 
 
    query: a.search, 
 
    parameters: getParametersAndValues(a), 
 
    file: (a.pathname.match(SYMBOLS_AFTER_LAST_SLASH_AT_STRING_END_REGEXP) || REGEXP_MATCH_STUB)[1], 
 
    hash: a.hash.replace(URL_FRAGMENT_MARK, DEFAULT_STRING), 
 
    path: a.pathname.replace(NOT_SLASH_AT_STRING_START_REGEXP, ORIGINAL_STRING_PREPENDED_BY_SLASH), 
 
    relative: (a.href.match(URL_RELATIVE_PART_REGEXP) || REGEXP_MATCH_STUB)[1], 
 
    segments: a.pathname.replace(SLASH_AT_STRING_START_REGEXP, DEFAULT_STRING).split(PATH_SEGMENTS_DELIMITER) 
 
    }; 
 
}

Ngoài ra còn có thể có một vài trường hợp khi thêm dấu gạch chéo là không thể. Nếu bạn biết một số, xin vui lòng bình luận câu trả lời của tôi.

Answer 7

này hoạt động cũng như:

url = url.replace(/\/$|$/, '/'); 

Ví dụ:

let urlWithoutSlash = 'https://www.example.com/path'; 
urlWithoutSlash = urlWithoutSlash.replace(/\/$|$/, '/'); 
console.log(urlWithoutSlash); 

let urlWithSlash = 'https://www.example.com/path/'; 
urlWithSlash = urlWithoutSlash.replace(/\/$|$/, '/'); 
console.log(urlWithSlash); 

Output:

https://www.example.com/path/ 
https://www.example.com/path/