javascript/jquery 向 url 添加斜杠(如果不存在)

Posted

技术标签:

【中文标题】javascript/jquery 向 url 添加斜杠(如果不存在)【英文标题】:javascript/jquery add trailing slash to url (if not present) 【发布时间】:2012-07-16 21:32:39 【问题描述】:

我正在制作一个小型 Web 应用程序,用户在其中输入一个服务器 URL,它通过 AJAX 请求从中提取大量数据。

由于用户必须手动输入 URL,人们通常会忘记尾部斜杠,即使它是必需的(因为某些数据会附加到输入的 url)。我需要一种方法来检查斜线是否存在,如果不存在,请添加它。

这似乎是一个 jQuery 可以解决的问题,有谁知道如何做到这一点,或者我应该为它编写一个 JS 函数吗?

【问题讨论】:

if(yourString.charAt(yourString.length-1) != '/')yourString+='/' ...认真的。只需自己编写代码。你花更多的时间问这个问题,你会花更多的时间来写代码。 @TheZ substr 也想要你的爱...... @c69 是的,但是我并没有从我的曲目中获得另一条 jQ 行的好处;) @c69 嗯,yourString[yourString.length-1] 显然是最快的。 charAt 是第二快的。 substr 因为这是最慢的方法,因为它没有将字符串作为数组访问。 【参考方案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.

临时变量名可以省略,直接嵌入到断言中:

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

由于目标是用单行更改url,所以也可以使用以下解决方案:

url = url.replace(/\/?$/, '/');
如果尾部斜杠存在,则替换为/。 如果尾部斜杠不存在,则在末尾附加一个/(准确地说:尾部锚点替换为/)。

【讨论】:

【参考方案2】:
url += url.endsWith("/") ? "" : "/"

【讨论】:

我更喜欢这个,因为它不使用(昂贵的)正则表达式。 这个更漂亮简洁了 @A.Rabus 你能详细说明为什么使用正则表达式很贵吗?我猜你指的是性能,但不确定为什么这个解决方案在这方面更好?本机 .endsWith() 是如何工作的?提前致谢。 正则表达式是复杂的小模式匹配程序,endswith 只是寻找最后一个字符...【参考方案3】:

我添加到正则表达式解决方案以适应查询字符串:

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

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

【讨论】:

好的正则表达式——仅供参考,你的小提琴缺少对“#”的检查,(尽管你的答案显然有。) 不错的正则表达式!可以通过将 '/$1' 更改为 '$1' 轻松转换为删除斜杠,这正是我正在寻找的 :)【参考方案4】:

这也有效:

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

例子:

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

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

输出:

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

它用尾部斜杠替换尾部斜杠或没有尾部斜杠。因此,如果存在斜线,则将其替换为一个(基本上将其留在那里);如果不存在,则添加尾部斜杠。

【讨论】:

@BilalHussain 与'/$|$' 基本相同,'\' 只是转义了后面的斜杠('/')。 '$' 表示检查输入字符串的结尾,'|' 只是一个OR。所以,用文字来说:匹配字符串末尾的/ 匹配字符串的末尾并将其替换为/。请参阅here 了解更多信息。 最优雅的做法,我不明白为什么这个没有最多票【参考方案5】:

你可以这样做:

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

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

这是证据:http://jsfiddle.net/matthewbj/FyLnH/

【讨论】:

如果你想避免正则表达式:if (url.slice(-1) !== '/') 【参考方案6】:

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"

您可以在MDN 上阅读有关URL 的更多信息

【讨论】:

这是最好的答案,因为它将输入视为 URL,而不是字符串。【参考方案7】:

在找到这个问题及其答案之前,我创建了自己的方法。我在这里发布它,因为我没有看到类似的东西。

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);
    

【讨论】:

history.replaceState 正是我一直在寻找的。它允许添加尾随斜杠而不进行完整的http 303重定向。非常感谢:)【参考方案8】:

并非每个 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)
  ;

在某些情况下可能无法添加斜线。如果你知道一些,请评论我的答案。

【讨论】:

【参考方案9】:

对于那些使用不同输入的人:如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://***.com";
console.log(myURL.href);

【讨论】:

以上是关于javascript/jquery 向 url 添加斜杠(如果不存在)的主要内容,如果未能解决你的问题,请参考以下文章

Javascript-- jQuery Ajax应用

使用 Javascript / Jquery 重写 URL 前缀

如何通过 javascript/jQuery 中的 url 发送数组

javascript JQuery:URL解析器

javascript jquery获取url params

JavaScript JQuery URl验证