javascript/jquery 向 url 添加尾部斜杠（如果不存在）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11531363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript/jquery add trailing slash to url (if not present)
提问by Hymanweirdy
I'm making a small web app in which a user enters a server URL from which it pulls a load of data with an AJAX request.
我正在制作一个小型网络应用程序，用户在其中输入一个服务器 URL，它通过 AJAX 请求从中提取大量数据。
Since the user has to enter the URL manually, people generally forget the trailing slash, even though it's required (as some data is appended to the url entered). I need a way to check if the slash is present, and if not, add it.
由于用户必须手动输入 URL，人们通常会忘记尾部斜杠，即使它是必需的（因为某些数据附加到输入的 url）。我需要一种方法来检查斜线是否存在，如果不存在，则添加它。
This seems like a problem that jQuery would have a one-liner for, does anyone know how to do this or should I write a JS function for it?
这似乎是 jQuery 有一个单行的问题，有没有人知道如何做到这一点，或者我应该为它编写一个 JS 函数吗？
回答by ManMohan Vyas
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.
}
The temporary variable name can be omitted, and directly embedded in the assertion:
临时变量名可以省略，直接嵌入到断言中：
if (url.substr(-1) != '/') url += '/';
Since the goal is changing the url with a one-liner, the following solution can also be used:
由于目标是使用单行更改 url，因此也可以使用以下解决方案：
url = url.replace(/\/?$/, '/');
- If the trailing slash exists, it is replaced with
/. - If the trailing slash does not exist, a
/is appended to the end (to be exact: The trailing anchor is replaced with/).
- 如果尾随斜杠存在，则将其替换为
/。 - 如果尾部斜杠不存在，
/则将a附加到末尾（准确地说：尾部锚点被替换为/）。
回答by Graham Hannington
url += url.endsWith("/") ? "" : "/"
回答by bne
I added to the regex solution to accommodate query strings:
我添加到正则表达式解决方案以容纳查询字符串：
url.replace(/\/?(\?|#|$)/, '/')
回答by honyovk
You can do something like:
您可以执行以下操作：
var url = 'http://stackoverflow.com';
if (!url.match(/\/$/)) {
url += '/';
}
Here's the proof: http://jsfiddle.net/matthewbj/FyLnH/
回答by mandarin
Before finding this question and it's answers I created my own approach. I post it here as I don't see something similar.
在找到这个问题及其答案之前，我创建了自己的方法。我把它贴在这里，因为我没有看到类似的东西。
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);
}
}
回答by Chad Johnson
This works as well:
这也有效：
url = url.replace(/\/$|$/, '/');
Example:
例子：
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/
回答by Nicolas Guérinet
For those who use different inputs: like http://example.comor http://example.com/eee. It should not add a trailling slash in the second case.
对于那些使用不同输入的人：比如http://example.com或http://example.com/eee。在第二种情况下，它不应添加尾部斜杠。
There is the serialization option using .href which will add trailing slash only after the domain (host).
有使用 .href 的序列化选项，它只会在域（主机）之后添加尾部斜杠。
In NodeJs,
在 NodeJs 中，
You would use the url module like this:
const url = require ('url');
let jojo = url.parse('http://google.com')
console.log(jojo);
In pure JS, you would use
在纯 JS 中，你会使用
var url = document.getElementsByTagName('a')[0];
var myURL = "http://stackoverflow.com";
console.log(myURL.href);
回答by Terbiy
Not every URL can be completed with slash at the end. There are at least several conditions that do not allow one:
并非每个 URL 都可以以斜线结尾。至少有几个条件不允许：
- String after last existing slash is something like
index.html. - There are parameters:
/page?foo=1&bar=2. - There is link to fragment:
/page#tomato.
- 最后一个现有斜杠之后的字符串类似于
index.html. - 有参数：
/page?foo=1&bar=2. - 有片段链接：
/page#tomato。
I have written a function for adding slash if none of the above cases are present. There are also two additional functions for checking the possibility of adding slash and for breaking URL into parts. Last one is not mine, I've given a link to the original one.
如果上述情况都不存在，我已经编写了一个添加斜杠的函数。还有两个附加功能用于检查添加斜杠的可能性和将 URL 分成几部分。最后一张不是我的，我已经给了原版的链接。
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 '' 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 = '/';
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)
};
}There might also be several cases when adding slash is not possible. If you know some, please comment my answer.
也可能有几种情况无法添加斜杠。如果你知道一些，请评论我的答案。
