web-dev-qa-db-fra.com

javascript/jquery ajoute un slash final à l'URL (s'il n'est pas présent)

Je crée une petite application Web dans laquelle un utilisateur entre une URL de serveur à partir de laquelle il extrait une charge de données avec une demande AJAX.

Étant donné que l'utilisateur doit entrer l'URL manuellement, les personnes oublient généralement la barre oblique finale, même si elle est requise (certaines données étant ajoutées à l'URL entrée). J'ai besoin d'un moyen de vérifier si la barre oblique est présente, et si non, l'ajouter.

Cela semble être un problème pour lequel jQuery aurait une ligne unique, est-ce que quelqu'un sait comment faire cela ou devrais-je écrire une fonction JS pour cela?

javascriptjqueryvalidation
32
jackweirdy
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.
}

Le nom de la variable temporaire peut être omis et directement intégré dans l'assertion:

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

Puisque l'objectif est de changer l'URL avec un one-liner, la solution suivante peut également être utilisée:

url = url.replace(/\/?$/, '/');
  • Si la barre oblique finale existe, elle est remplacée par /.
  • Si le slash de fin n'existe pas, un / est ajouté à la fin (pour être exact: l'ancre de fin est remplacée par /).
97
ManMohan Vyas
url += url.endsWith("/") ? "" : "/"
22
Graham Hannington

J'ai ajouté à la solution regex pour prendre en charge les chaînes de requête:

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

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

Vous pouvez faire quelque chose comme:

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

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

Voici la preuve: http://jsfiddle.net/matthewbj/FyLnH/

3
honyovk

Avant de trouver cette question et ses réponses, j'ai créé ma propre approche. Je le poste ici car je ne vois pas quelque chose de similaire.

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);
    }
}
2
mandarin

Cela fonctionne aussi bien:

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

Exemple:

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

Sortie:

https://www.example.com/path/
https://www.example.com/path/
1
Chad Johnson

Pour ceux qui utilisent différentes entrées: comme http://example.com ou http://example.com/eee . Il ne faut pas ajouter une barre oblique dans le second cas.

Il y a l'option de sérialisation utilisant .href qui ajoutera une barre oblique après le domaine (hôte). 

Dans NodeJs, 

You would use the url module like this: 
const url = require ('url');
let jojo = url.parse('http://google.com')
console.log(jojo);

En pur JS, vous utiliseriez 

var url = document.getElementsByTagName('a')[0];
var myURL = "http://stackoverflow.com";
console.log(myURL.href);
0
Nicolas Guérinet

Toutes les URL ne peuvent pas être complétées par une barre oblique à la fin. Il y a au moins plusieurs conditions qui ne permettent pas une:

  • Chaîne après la dernière barre oblique existante est quelque chose comme index.html.
  • Il y a des paramètres: /page?foo=1&bar=2.
  • Il y a un lien vers fragment: /page#tomato.

J'ai écrit une fonction permettant d'ajouter une barre oblique si aucun des cas ci-dessus n'est présent. Il existe également deux fonctions supplémentaires permettant de vérifier la possibilité d'ajouter une barre oblique et de séparer l'URL en plusieurs parties. Le dernier n'est pas le mien, j'ai donné un lien vers l'original.

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

Il peut également y avoir plusieurs cas où l’ajout de barre oblique n’est pas possible. Si vous en connaissez, commentez ma réponse.

0
Terbiy