W javascript, jak mogę dodać parametr ciągu zapytania do adresu URL, jeśli nie jest obecny, lub jeśli jest obecny, zaktualizować bieżącą wartość? Używam jquery do programowania po stronie mojego klienta.
javascript
jquery
query-string
amator
źródło
źródło
String#split
przyjmuje drugi parametr dla maksymalnych podziałów.map
Pomocne będą także jQuery's .Odpowiedzi:
Napisałem następującą funkcję, która osiąga to, co chcę osiągnąć:
źródło
[?|&]
powinno być[?&]
var
tuż przed deklaracją separatora.value = encodeURIComponent(value);
w pierwszym wierszu, w przeciwnym razie podziały wiersza nie zostaną poprawnie zmienione.Rozszerzyłem to rozwiązanie i połączyłem je z innym, które znalazłem, aby zastąpić / zaktualizować / usunąć parametry zapytania w oparciu o dane wprowadzone przez użytkowników i biorąc pod uwagę zakotwiczenie adresów URL.
Brak podania wartości spowoduje usunięcie parametru, podanie jednego spowoduje dodanie / aktualizację parametru. Jeśli nie zostanie podany żaden adres URL, zostanie on pobrany z window.location
Aktualizacja
Wystąpił błąd podczas usuwania pierwszego parametru z kwerendy, przerobiłem wyrażenie regularne i przetestowałem, aby uwzględnić poprawkę.
Druga aktualizacja
Jak sugeruje @ JarónBarends - Popraw wartość, aby sprawdzić przed niezdefiniowanym i zerowym, aby umożliwić ustawienie 0 wartości
Trzecia aktualizacja
Wystąpił błąd polegający na tym, że usunięcie zmiennej zapytania bezpośrednio przed hashtagiem utraciło naprawiony symbol hashtagu
Czwarta aktualizacja
Dzięki @rooby za wskazanie optymalizacji wyrażeń regularnych w pierwszym obiekcie RegExp. Ustaw początkowe wyrażenie regularne na ([? &]) Z powodu problemu z użyciem (\? | &) Znalezionego przez @YonatanKarni
Piąta aktualizacja
Usunięcie deklarującej zmiennej hash w instrukcji if / else
źródło
value
spowoduje usunięcie zmiennych z kwerendy, gdy ustawisz ich wartość na 0. Więc zamiast tegoif (value) {}
powinieneś użyćif (typeOf value !== 'undefined' && value !== null) {}
hash
jest deklarowana dwukrotnie;)Narzędzie URLSearchParams może być do tego przydatne w połączeniu z
window.location.search
. Na przykład:Teraz
foo
ustawiono nabar
niezależnie od tego, czy już istnieje.Jednak powyższe przypisanie
window.location.search
spowoduje załadowanie strony, więc jeśli nie jest to pożądane, użyj interfejsu API historii w następujący sposób:Teraz nie musisz pisać własnego wyrażenia regularnego ani logiki, aby obsłużyć możliwe istnienie ciągów zapytań.
Jednak obsługa przeglądarki jest słaba, ponieważ jest obecnie eksperymentalna i jest używana tylko w najnowszych wersjach Chrome, Firefox, Safari, iOS Safari, Android Browser, Android Chrome i Opera. Użyj z polifillem, jeśli zdecydujesz się go użyć.
Aktualizacja: Obsługa przeglądarki poprawiła się od czasu mojej pierwotnej odpowiedzi.
źródło
Unable to set property '__URLSearchParams__:0.8503766759030615' of undefined or null reference
polly , nie jest dobre, na ie11 pojawia się ten błąd. to nie jest pollyfill, jeśli nie działa jako rezerwowy.newRelativePathQuery
robi lewę:var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString() + window.location.hash;
Na podstawie odpowiedzi @ amatora (i teraz zawierającej poprawkę z komentarza @j_walker_dev), ale biorąc pod uwagę komentarz dotyczący znaczników skrótu w adresie URL, używam następujących elementów:
Edytowane, aby naprawić
[?|&]
w wyrażeniach regularnych, które oczywiście powinny być takie,[?&]
jak wskazano w komentarzachEdycja: Alternatywna wersja do obsługi usuwania parametrów adresu URL. Użyłem
value === undefined
jako sposobu wskazania usunięcia. Można użyćvalue === false
lub nawet osobnego parametru wejściowego zgodnie z potrzebami.Zobacz to w akcji na https://jsfiddle.net/bp3tmuxh/1/
źródło
var separator
linii w prawo nad zwrotem naprawia błąd z „/ app # / cool? Fun = true”. To wybrałoby „&” jako separator, nawet jeśli nie ma jeszcze prawdziwych parametrów ciągu zapytania. Tylko klient.[?|&]
powinno być po prostu[?&]
(w przeciwnym razie będzie pasować|
)."([?|&])"
nie jest dobrze. Proszę to naprawić albo jakovar re = new RegExp("(?|&)" + key + "=.*?(&|#|$)", "i");
lubvar re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
(miły rozszerzenia w inny sposób!)var re = new RegExp("(?|&)" + key + "=.*?(&|#|$)", "i");
nie działa, drugi działaOto moja biblioteka, aby to zrobić: https://github.com/Mikhus/jsurl
źródło
window.location.search jest do odczytu / zapisu.
Jednak - zmodyfikowanie ciągu zapytania spowoduje przekierowanie strony, na której jesteś, i spowoduje odświeżenie z serwera.
Jeśli próbujesz zachować stan po stronie klienta (i potencjalnie sprawić, że będzie można go dodawać do zakładek), będziesz chciał zmodyfikować skrót adresu URL zamiast ciągu zapytania, co utrzyma cię na tej samej stronie (window.location). hash to read / write). W ten sposób robią to strony internetowe takie jak twitter.com.
Będziesz także chciał, aby przycisk Wstecz działał, będziesz musiał powiązać zdarzenia javascript ze zdarzeniem zmiany skrótu, dobrym pluginem do tego jest http://benalman.com/projects/jquery-hashchange-plugin/
źródło
Jeśli nie jest ustawiony lub chcesz zaktualizować o nową wartość, możesz użyć:
Nawiasem mówiąc, jest to proste JavaScript.
EDYTOWAĆ
Możesz spróbować użyć wtyczki obiekt zapytania do obiektu jquery
źródło
Zdaję sobie sprawę, że to pytanie jest stare i zostało udzielone odpowiedzi na śmierć, ale oto moje dźgnięcie. Próbuję tu wymyślić na nowo koło, ponieważ korzystałem z obecnie akceptowanej odpowiedzi, a niewłaściwe obchodzenie się z fragmentami adresów URL ostatnio ugryzło mnie w projekt.
Funkcja znajduje się poniżej. Jest dość długi, ale został stworzony tak, aby był jak najbardziej odporny. Chciałbym sugestie dotyczące skrócenia / poprawy. Przygotowałem dla niego mały pakiet testowy jsFiddle (lub inne podobne funkcje). Jeśli jakaś funkcja może przejść każdy z testów, mówię, że prawdopodobnie dobrze jest przejść.
Aktualizacja: natknąłem się na fajną funkcję do używania DOM do analizowania adresów URL , więc zastosowałem tę technikę tutaj. Dzięki temu funkcja jest krótsza i bardziej niezawodna. Podpowiada autorowi tej funkcji.
źródło
Oto moje podejście:
location.params()
Funkcja (pokazana poniżej) może być używana jako getter lub setter. Przykłady:Biorąc pod uwagę, że adres URL jest
http://example.com/?foo=bar&baz#some-hash
,location.params()
zwróci obiekt ze wszystkimi parametrami zapytania:{foo: 'bar', baz: true}
.location.params('foo')
wróci'bar'
.location.params({foo: undefined, hello: 'world', test: true})
zmieni adres URL nahttp://example.com/?baz&hello=world&test#some-hash
.Oto
params()
funkcja, którą można opcjonalnie przypisać dowindow.location
obiektu.źródło
To moja preferencja i obejmuje przypadki, o których mogę myśleć. Czy ktoś może pomyśleć o sposobie zredukowania go do pojedynczego zamiennika?
źródło
Wiem, że to jest dość stare, ale chcę tutaj odpalić swoją działającą wersję .
UWAGA To jest zmodyfikowana wersja @elreimundo
źródło
Moje podejście stąd (zgodne z „use strict”; tak naprawdę nie używa jQuery):
Przykładowe użycie:
źródło
Na podstawie odpowiedzi udzielonej przez @ellemayo wymyśliłem następujące rozwiązanie, które w razie potrzeby pozwala na wyłączenie tagu hash:
Nazwij to tak:
Prowadzi do:
źródło
typeof value !== 'undefined' && value !== null
jest bardziej wyraźna, alevalue != null
oznacza to samo i jest bardziej zwięzła.Oto krótsza wersja, która się tym zajmuje
Kod:
Regex opis można znaleźć tutaj .
UWAGA : To rozwiązanie jest oparte na odpowiedzi @amateur, ale z wieloma ulepszeniami.
źródło
Kod, który dołącza listę parametrów do istniejącego adresu URL za pomocą ES6 i jQuery:
Gdzie jest listOfParams
Przykład użycia:
Szybkie testy:
źródło
Inne podejście bez użycia wyrażeń regularnych . Obsługuje kotwice „mieszające” na końcu adresu URL, a także wiele znaków znaku zapytania (?). Powinien być nieco szybszy niż podejście do wyrażeń regularnych.
źródło
Ta funkcja służy do dodawania, usuwania i modyfikowania parametru ciągu zapytania z adresu URL na podstawie jquery
Dodaj nowy i zmodyfikuj istniejący parametr do adresu URL
Usuń istniejące
źródło
Korzystając z
jQuery
tego możemy zrobić jak poniżejW zmiennej
new_url
będziemy mieć nowe parametry zapytania.Odniesienie: http://api.jquery.com/jquery.param/
źródło
Aby podać przykład kodu do modyfikacji
window.location.search
zgodnie z sugestiami Gal i tradyblix:źródło
Kod skryptu Java, aby znaleźć określony ciąg zapytania i zastąpić jego wartość *
źródło
Tak, miałem problem z przepełnieniem i zduplikowaniem mojego zapytania, ale było to spowodowane moją własną powolnością. więc grałem trochę i opracowałem js jquery (właściwie skwierczenie) i magię C #.
Właśnie zdałem sobie sprawę, że po tym, jak serwer wykona przekazane wartości, wartości nie mają już znaczenia, nie ma ponownego użycia, jeśli klient chciał zrobić to samo, to oczywiście zawsze będzie nowe żądanie, nawet jeśli jest to przekazywane są te same parametry. I to wszystko po stronie klienta, więc niektóre buforowanie / pliki cookie itp. Mogą być fajne pod tym względem.
JS:
HTML:
DO#:
Żadnych duplikatów, każde żądanie jest tak unikalne, jak je zmodyfikowałeś, a ze względu na jego strukturę łatwo dodawać kolejne zapytania dynamicznie z poziomu domeny.
źródło
Oto alternatywna metoda wykorzystująca wbudowane właściwości zakotwiczonego elementu HTML:
źródło
jeśli chcesz ustawić wiele parametrów jednocześnie:
taka sama funkcja jak @ amatorska
jeśli jslint daje błąd, dodaj to po pętli for
źródło
http://abc.def/?a&b&c
).Na tej stronie znajduje się wiele niezręcznych i niepotrzebnie skomplikowanych odpowiedzi. Najwyżej oceniany @ amator jest całkiem niezły, chociaż ma trochę niepotrzebnego puchu w RegExp. Oto nieco bardziej optymalne rozwiązanie z czystszym RegExp i czystszym
replace
połączeniem:Jako dodatkowy bonus, jeśli
uri
nie jest ciągiem, nie będziesz otrzymywać błędów podczas próby połączeniamatch
lubreplace
na czymś, co może nie implementować tych metod.A jeśli chcesz obsłużyć przypadek skrótu (i sprawdziłeś już poprawnie sformatowany HTML), możesz wykorzystać istniejącą funkcję zamiast pisać nową funkcję zawierającą tę samą logikę:
Lub możesz wprowadzić niewielkie zmiany w doskonałej odpowiedzi @ Adama:
źródło
separator
nie jest zdefiniowany wupdateQueryStringParamsNoHash
. WupdateQueryStringParameter
wszystko się psuje, jeśli zastępowanemu parametrowi nie jest przypisana wartość (nphttp://abc.def/?a&b&c
.).Powinno to służyć celowi:
źródło