Als Front-End-Entwickler müssen wir häufig URLs bedienen und verarbeiten. Am häufigsten müssen wir die im URL-Link enthaltenen Parameterwerte abrufen. Freunde, die die Framework-Entwicklung verwenden, finden dies möglicherweise sehr einfach, da das Framework viele Methoden bereitstellt, mit denen wir die im URL-Link enthaltenen Parameter bequem abrufen können. Aber manchmal können wir uns nicht auf das Framework verlassen und müssen natives JS verwenden, um Parameter zu erhalten. Dies ist auch eine Frage, die in Interviews häufig gestellt wird. Heute werden wir den Code manuell zerlegen und natives JS verwenden, um die URL-Link-Parameterwerte zu erhalten.
Es gibt mehrere Möglichkeiten, URL-Link-Parameter mit nativem JS zu erhalten. Heute erklären wir der Reihe nach die häufigsten:
Verwendung des regulären Abgleichs,
Verwendung der integrierten Methode „a tag“,
Verwendung der Split-Methode,
Verwendung von URLSearchParams Methode
Dies ist eine sehr standardmäßige Methode. Der entscheidende Punkt ist, dass wir reguläre Ausdrücke verstehen müssen.
Der Code lautet wie folgt:
<script>
//Regulären Ausdruck verwenden let url = "http://www.baidu.com?name=elephant&age=25&sex=male&num=100"
// // Rückgabeparameter Objektfunktion queryURLParams(url) {
let pattern = /(w+)=(w+)/ig; //Regulären Ausdruck definieren let parames = {}; //Parameterobjekt url.replace(pattern, ($, $1, $2) => {
Parameter[$1] = $2;
});
Rückgabeparameter;
}
console.log(queryURLParams(url))
</script> Der Schwerpunkt des obigen Codes liegt unter anderem auf der Definition regulärer Ausdrücke und der Verwendung der Ersetzungsmethode
1 und $2 stehen jeweils für name=elephant, name,elefant usw. Sie können es selbst erlernen, um eine detailliertere Verwendung von Ersetzen in Kombination mit regulären Ausdrücken zu erfahren.
Realisierungseffekt:
wird von Menschen selten verwendet, da sie schließlich eine gewisse Bedeutung für schwarze Technologie hat. Sein Prinzip besteht hauptsächlich darin, das Tag a zu verwenden, um einige integrierte Attribute wie href, Hash, Suche und andere Attribute abzurufen.
Der Code lautet wie folgt:
<script>
let URL = „http://www.baidu.com?name=elephant&age=25&sex=male&num=100#smallpig“
Funktion queryURLParams(url) {
// 1. Tag erstellen let link = document.createElement('a');
link.href = URL;
let searchUrl = link.search.substr(1); // Holen Sie sich den String nach dem Fragezeichen let hashUrl = link.hash.substr(1); // Holen Sie sich den Wert nach # let obj = {}; object/ / 2. hashUrl im Objekt speichern? obj['HASH'] = hashUrl : null;
for (let i = 0; i < list.length; i++) {
let arr = list[i].split("=");
obj[arr[0]] = arr[1];
}
return obj;
}
console.log(queryURLParams(URL))
</script> Im obigen Code wird zuerst ein a-Tag erstellt, und dann kann jeder Teil der URL basierend auf den Attributen des a-Tags abgerufen werden. Dies ähnelt tatsächlich dem Routing-Sprung von Vue, um Parameter zu erhalten.
Realisierungseffekt:
Diese Methode nutzt die Tatsache, dass Split eine Zeichenfolge basierend auf einem bestimmten Zeichen in ein Array aufteilen kann, und teilt jeden Parameter geschickt auf.
Der Code lautet wie folgt:
<script>
let URL = „http://www.baidu.com?name=elephant&age=25&sex=male&num=100“
Funktion queryURLParams(URL) {
// const url = location.search; // Im Projekt können Sie die Zeichenfolge nach dem „?“-Zeichen in der URL direkt über die Suchmethode erhalten let url = URL.split("?")[1];
let obj = {}; // Parameterobjekt deklarieren let arr = url.split("&"); // Aufteilen in Array mit kaufmännischem Und for (let i = 0; i < arr.length; i++) {
let arrNew = arr[i].split("="); // Aufteilen in Arrays mit "=" obj[arrNew[0]] = arrNew[1];
}
return obj;
}
console.log(queryURLParams(URL))
</script> Wenn der Upload-Code in einem tatsächlichen Projekt verwendet wird, können Sie location.search direkt verwenden, um die Zeichenfolge nach „?“ abzurufen. Zur Vereinfachung der Demonstration wird Split verwendet, um Folgendes zu teilen.
Realisierungseffekt:
der URLSearchParams-Methode können wir URL-Parameter sehr bequem abrufen, es gibt jedoch bestimmte Kompatibilitätsprobleme. Die offizielle Website erklärt dies wie folgt:
Die URLSearchParams-Schnittstelle definiert einige praktische Methoden zur Verarbeitung von URL-Abfragezeichenfolgen.
Diese Schnittstelle stellt uns spezielle Methoden zur Verarbeitung von URL-Parametern zur Verfügung. Hier stellen wir nur vor, wie man URL-Parameterwerte erhält. Weitere Informationen zur Verwendung finden Sie auf der offiziellen Website.
Der Code lautet wie folgt:
<script>
let URL = „http://www.baidu.com?name=elephant&age=25&sex=male&num=100“
Funktion queryURLParams(URL) {
let url = URL.split("?")[1];
const urlSearchParams = new URLSearchParams(url);
const params = Object.fromEntries(urlSearchParams.entries());
Rückgabeparameter
}
console.log(queryURLParams(URL))
</script> Hier verwenden wir grundsätzlich nur zwei Zeilen Hauptcode, um die Parameteranalyse zu implementieren. Es ist zu beachten, dass urlSearchParams.entries() einen Iterator des Iterationsprotokolls zurückgibt. Daher müssen wir die Methode Object.fromEntries() verwenden, um die Liste der Schlüssel-Wert-Paare in ein Objekt umzuwandeln.
Informationen zum Iterationsprotokoll finden Sie auf der offiziellen Website:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Iteration_protocols,
um den folgenden Effekt zu erzielen:
Kompatibilität:
Sie sehen, dass unsere Schnittstelle nicht mit dem IE, der Quelle allen Übels, kompatibel ist.
Hier werden vier Methoden vorgestellt, um das Parsen von URL-Link-Parameterwerten zu realisieren. Die am weitesten verbreitete Methode ist die Split-Methode. Als aufsteigender Stern wird urlSearchParams nach und nach von allen erkannt und es gibt viele Möglichkeiten, es mit dem IE kompatibel zu machen.
[Empfohlene verwandte Video-Tutorials: Web-Frontend]
Wie erhalte ich URL-Parameter in JavaScript? Für detaillierte Erläuterungen zu vier gängigen Methoden beachten Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website für weitere Informationen!
