Cara mendapatkan nilai dari link di javascript

Question

Tulis fungsi JavaScript untuk mendapatkan nilai atribut href, hreflang, rel, target, dan type dari link yang ditentukan

Table of Contents Show

JavaScript. Kiat Hari Ini
Metode 2. Dapatkan Nilai Parameter URL dalam JavaScript Dengan Objek URLSearchParams
Bagaimana cara mendapatkan nilai dari URL dalam JavaScript?
Bagaimana cara mendapatkan nilai teks dari tautan dalam JavaScript?
Bagaimana cara mendapatkan nilai dari href di JavaScript?
Bagaimana cara mendapatkan string URL dalam JavaScript?

Contoh berkas HTML


<!DOCTYPE html>
<html><head>
<meta charset=utf-8 />
</head>
<body>
<p><a id="w3r" type="text/html" hreflang="en-us" rel="nofollow" target="_self" href="https://www.w3resource.com/">w3resource</a></p>
<button onclick="getAttributes()">Click here to get  attributes value</button>
</body></html>

Contoh Solusi. -

Kode HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Collect the value of href, hreflang, rel, target, and type attributes of a link</title> 
</head> 
<body> 
<p><a id="w3r" type="text/html" hreflang="en-us" rel="nofollow" target="_self" href="https://www.w3resource.com/">w3resource</a></p> 
<button onclick="getAttributes()">Click here to get the attribute's value</button>  
</body> 
</html>

_

Kode JavaScript

function getAttributes()
{
 var u = document.getElementById("w3r").href;
 alert('The value of the href attribute of the link is : '+u);
 var v = document.getElementById("w3r").hreflang;   
 alert('The value of the hreflang attribute of the link is : '+v);
 var w = document.getElementById("w3r").rel; 
  alert('The value of the rel attribute of the link is : '+w);
 var x = document.getElementById("w3r").target; 
  alert('The value of the taget attribute of the link is : '+x);
 var y = document.getElementById("w3r").type; 
  alert('The value of the type attribute of the link is : '+y);  
}

Keluaran Sampel

Flow chart

Demo Langsung

Lihat Pen javascript-dom-exercise-4 oleh w3resource (@w3resource) di CodePen

Tingkatkan solusi contoh ini dan poskan kode Anda melalui Disqus

Sebelumnya. Tulis program JavaScript untuk mengatur warna latar belakang paragraf
Lanjut. Tulis fungsi JavaScript untuk menambahkan baris ke tabel

Berapa tingkat kesulitan latihan ini?

Mudah Sedang Keras

Uji keterampilan Pemrograman Anda dengan kuis w3resource

Ikuti kami di Facebook dan Twitter untuk pembaruan terbaru.

JavaScript. Kiat Hari Ini

Hasilkan Angka Acak Antara 2 Angka

Kita dapat menghasilkan angka acak antara 2 angka dengan beberapa aritmatika dan Matematika. metode acak
Misalnya, kita bisa menulis

Math.floor(Math.random() * 10 + 1)

Kemudian kami menghasilkan angka antara 1 dan 10

Matematika. floor membulatkan angka yang dihasilkan ke bilangan bulat terdekat

referensi. https. //sedikit. ly/3mp5NgH

Tren Mingguan
Latihan Pemrograman Dasar Java
Subkueri SQL
Latihan Database Adventureworks
Latihan Dasar C# Sharp
SQL COUNT() dengan perbedaan
Latihan String JavaScript
Validasi Formulir JavaScript HTML
Latihan Pengumpulan Java
fungsi SQL COUNT()
Gabung Dalam SQL
Latihan fungsi JavaScript
Tutorial Python
Latihan Array Python
Gabung Silang SQL
Latihan C# Sharp Array

Metode "split ()" membagi string yang diberikan menjadi array substring tanpa ada perubahan pada string aslinya. Metode ini dapat diterapkan ke URL yang diberikan dalam dua bagian, dan perulangan for dapat digunakan untuk mengontrol iterasi dengan bantuan properti panjang untuk mendapatkan semua nilai parameter

Sintaksis

string. pisah( pemisah, batas )

Di sini, "separator" mengacu pada string yang perlu dipisahkan dan "limit" adalah angka yang mewakili batas pemisahan

Lihat contoh berikut untuk memahami konsep yang dinyatakan

Contoh

Dalam contoh di bawah ini, kita akan membuat tombol dan melampirkan event onclick dengannya yang akan mengakses fungsi “getParameters()”

< klik tombol = "getParameters()"> Get URL parameters value button>

Sekarang, kita akan mendefinisikan fungsi getParameters(). Dalam definisinya, URL dari domain contoh ditambahkan yang akan diakses dan disimpan dalam variabel bernama "getUrl". Selanjutnya, URL yang ditentukan akan dipecah menjadi dua bagian menggunakan “?”

Setelah itu, loop "untuk" akan diterapkan sedemikian rupa sehingga masing-masing parameter dan nilainya akan ditampilkan di konsol

fungsi getParameters () {
biarkan getUrl = "https. //contoh. com/?product=shirts&color=white&user=anonymous&size=s";
biarkan getParameters = getUrl. pisah('?')[1];
letparams = getParameters. pisah('&');
untuk( biarkan aku = 0; i <params.panjang; i ++) {
letvalue = params[ i ].pisah('==');
konsol. log( nilai [0], value[1]);
}
}

Output dari implementasi di atas akan menghasilkan sebagai berikut

Itu semua tentang mengakses semua nilai parameter sekaligus. Namun, jika Anda ingin mendapatkan nilai dari parameter tertentu, lanjutkan ke bagian berikutnya

Metode 2. Dapatkan Nilai Parameter URL dalam JavaScript Dengan Objek URLSearchParams

"URLSearchParams" juga dapat digunakan untuk mendapatkan URL yang ditentukan menggunakan objek dan mengambil nilai tertentu terhadap atribut yang sesuai

Pergi melalui contoh berikut untuk demonstrasi lebih lanjut

Contoh

Pertama, sertakan tombol dengan event “onclick” yang akan mengakses fungsi yang ditentukan seperti yang dibahas di metode sebelumnya

< jenis masukan = "tombol" nilai< = "Get URL parameter value" onclick= "urlParameter()">

Selanjutnya, sebuah fungsi bernama urlParameter() akan ditentukan. Di sini objek baru bernama "URLSearchParams" dibuat, yang akan mengakses url yang ditentukan merujuk ke domain contoh. Terakhir, tampilkan semua nilai yang sesuai dengan atribut yang ditentukan. Dalam kasus kami,

fungsi urlParameter (){

biarkan getUrl = baru URLSearchParams ("https://example.com/?product=shirts&color=white&user=anonymous&size=s")

konsol. log( getUrl. dapatkan('pengguna'));

}

Keluaran

Pada keluaran di atas, dapat diamati bahwa nilai "anonim" diambil untuk parameter "pengguna".

Kami telah mengilustrasikan berbagai metode untuk mendapatkan nilai parameter URL dalam JavaScript

Kesimpulan

Untuk mendapatkan nilai parameter URL dalam JavaScript, gunakan metode “split()” dengan loop “for” untuk memisahkan URL yang ditentukan, pisahkan setiap nilai parameter dan tampilkan dengan menambahkan kondisi yang diperlukan terhadap atribut yang sesuai. Selain itu, metode objek “URLSearchParams” dapat digunakan untuk membuat objek baru dan mengekstrak nilai atribut tertentu. Artikel ini telah mendemonstrasikan metode untuk mendapatkan nilai parameter URL dalam JavaScript

Bagaimana cara mendapatkan nilai dari URL dalam JavaScript?

Untuk mendapatkan parameter URL, ada 2 cara. .

Dengan menggunakan Objek URLSearchParams

Dengan menggunakan Memisahkan dan mengakses setiap pasangan parameter

Bagaimana cara mendapatkan nilai teks dari tautan dalam JavaScript?

Cukup menggunakan dokumen. getElementById('anchorID'). teks ; . Properti teks menyetel atau mengembalikan konten teks dari tautan.

Bagaimana cara mendapatkan nilai dari href di JavaScript?

Metode 1. Dapatkan href Menggunakan Metode getAttribute() . Nilai yang dikembalikan adalah null atau string kosong jika atribut yang diinginkan tidak ada.

Bagaimana cara mendapatkan string URL dalam JavaScript?

URL saat ini dapat diperoleh dengan menggunakan properti 'URL' dari objek Dokumen yang berisi informasi tentang URL saat ini . Properti 'URL' mengembalikan sebuah string dengan lokasi lengkap dari halaman saat ini, bersama dengan berisi string yang memiliki protokol HTTP seperti ( http. //).

kode javascript