webentwicklung-frage-antwort-db.com.de

javascript/Jquery fügen Sie einen nachgestellten Schrägstrich zu URL hinzu (falls nicht vorhanden)

Ich mache eine kleine Web-App, in die ein Benutzer eine Server-URL eingibt, von der er Daten mit einer AJAX -Anforderung abruft.

Da der Benutzer die URL manuell eingeben muss, vergessen die Benutzer in der Regel den nachstehenden Schrägstrich, obwohl dies erforderlich ist (da einige Daten an die eingegebene URL angehängt werden). Ich brauche einen Weg, um zu überprüfen, ob der Schrägstrich vorhanden ist, und falls nicht, fügen Sie ihn hinzu.

Dies scheint ein Problem zu sein, für das jQuery einen Einzeiler hat. Weiß jemand, wie das geht, oder sollte ich eine JS-Funktion dafür schreiben?

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.
}

Der temporäre Variablenname kann weggelassen und direkt in die Assertion eingebettet werden:

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

Da das Ziel das Ändern der URL mit einem Einzeiler ist, kann auch die folgende Lösung verwendet werden:

url = url.replace(/\/?$/, '/');
  • Wenn der nachstehende Schrägstrich vorhanden ist, wird er durch / ersetzt.
  • Wenn der nachstehende Schrägstrich nicht vorhanden ist, wird ein / an das Ende angehängt (um genau zu sein: Der nacheilende Anker wird durch / ersetzt).
97
ManMohan Vyas
url += url.endsWith("/") ? "" : "/"
22

Ich habe die Regex-Lösung hinzugefügt, um Abfragezeichenfolgen aufzunehmen:

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

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

Sie können so etwas tun:

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

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

Hier ist der Beweis: http://jsfiddle.net/matthewbj/FyLnH/

3
honyovk

Bevor ich diese Frage und ihre Antworten gefunden habe, habe ich einen eigenen Ansatz entwickelt. Ich poste es hier, da ich nichts ähnliches sehe.

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

Das funktioniert auch:

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

Beispiel:

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

Ausgabe:

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

Für diejenigen, die unterschiedliche Eingaben verwenden: wie http://example.com oder http://example.com/eee . Im zweiten Fall sollte es keinen zusätzlichen Schrägstrich geben.

Es gibt die Serialisierungsoption mit .href, die den nachstehenden Schrägstrich nur nach der Domäne (Host) hinzufügt. 

In 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 würdest du verwenden 

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

Nicht jede URL kann am Ende mit einem Schrägstrich abgeschlossen werden. Es gibt mindestens mehrere Bedingungen, die keine zulassen:

  • String nach dem letzten vorhandenen Schrägstrich ist so etwas wie index.html.
  • Es gibt Parameter: /page?foo=1&bar=2.
  • Es gibt einen Link zu Fragment: /page#tomato.

Ich habe eine Funktion zum Hinzufügen eines Schrägstrichs geschrieben, wenn keiner der oben genannten Fälle vorliegt. Es gibt auch zwei zusätzliche Funktionen, um die Möglichkeit des Hinzufügens eines Schrägstrichs und das Aufteilen der URL in Teile zu prüfen. Das letzte ist nicht meins, ich habe einen Link zum Original gegeben.

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

Es kann auch mehrere Fälle geben, in denen das Hinzufügen eines Schrägstrichs nicht möglich ist. Wenn Sie einige wissen, kommentieren Sie bitte meine Antwort.

0
Terbiy