我正在制作一个小型 Web 应用程序,用户在其中输入一个服务器 URL,它通过 AJAX 请求从中提取大量数据。
由于用户必须手动输入 URL,人们通常会忘记尾部斜杠,即使它是必需的(因为一些数据附加到输入的 url)。我需要一种方法来检查斜线是否存在,如果不存在,请添加它。
这似乎是一个 jQuery 将有一个单行的问题,有谁知道如何做到这一点,或者我应该为它编写一个 JS 函数吗?
我正在制作一个小型 Web 应用程序,用户在其中输入一个服务器 URL,它通过 AJAX 请求从中提取大量数据。
由于用户必须手动输入 URL,人们通常会忘记尾部斜杠,即使它是必需的(因为一些数据附加到输入的 url)。我需要一种方法来检查斜线是否存在,如果不存在,请添加它。
这似乎是一个 jQuery 将有一个单行的问题,有谁知道如何做到这一点,或者我应该为它编写一个 JS 函数吗?
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.
}
临时变量名可以省略,直接嵌入到断言中:
if (url.substr(-1) != '/') url += '/';
由于目标是使用单行更改 url,因此也可以使用以下解决方案:
url = url.replace(/\/?$/, '/');
/
./
附加到末尾(准确地说:尾部锚点替换为/
)。url += url.endsWith("/") ? "" : "/"
这也有效:
url = url.replace(/\/$|$/, '/');
例子:
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);
输出:
https://www.example.com/path/
https://www.example.com/path/
它用尾部斜杠替换尾部斜杠或没有尾部斜杠。因此,如果存在斜线,则将其替换为一个(基本上将其留在那里);如果不存在,则添加尾部斜杠。
您可以执行以下操作:
var url = 'http://stackoverflow.com';
if (!url.match(/\/$/)) {
url += '/';
}
这是证明:http: //jsfiddle.net/matthewbj/FyLnH/
这个URL
类非常棒——它帮助我们改变路径并处理查询参数和片段标识符
function addTrailingSlash(u) {
const url = new URL(u);
url.pathname += url.pathname.endsWith("/") ? "" : "/";
return url.toString();
}
addTrailingSlash('http://example.com/slug?page=2');
// result: "http://example.com/slug/?page=2"
URL
您可以在MDN上阅读更多信息
在找到这个问题及其答案之前,我创建了自己的方法。我把它贴在这里,因为我没有看到类似的东西。
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);
}
}
并非每个 URL 都可以在末尾用斜杠完成。至少有几个条件不允许:
index.html
./page?foo=1&bar=2
./page#tomato
。如果上述情况都不存在,我已经编写了一个添加斜线的函数。还有两个附加功能可用于检查添加斜杠的可能性和将 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 '$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)
};
}
也可能存在无法添加斜线的几种情况。如果你知道一些,请评论我的答案。
对于那些使用不同输入的人:例如http://example.com或http://example.com/eee。在第二种情况下,它不应添加尾部斜杠。
有使用 .href 的序列化选项,它只会在域(主机)之后添加斜杠。
在 NodeJs 中,
You would use the url module like this:
const url = require ('url');
let jojo = url.parse('http://google.com')
console.log(jojo);
在纯 JS 中,你会使用
var url = document.getElementsByTagName('a')[0];
var myURL = "http://stackoverflow.com";
console.log(myURL.href);