Bagaimana cara memeriksa apakah url adalah http atau https dalam javascript?

Untuk menghapus http:// atau https:// dari URL, panggil metode replace() dengan ekspresi reguler berikut - /^https?:\/\// dan string kosong sebagai parameter

Metode replace akan mengembalikan string baru di mana bagian http:// dihapus

Jika Anda ingin menghindari penggunaan ekspresi reguler, gulir ke bawah ke subjudul berikutnya

Kami membuat fungsi yang dapat digunakan kembali yang menghapus bagian http:// atau https:// dari URL yang diberikan

Tali. metode replace() mengembalikan string baru dengan satu, beberapa, atau semua kecocokan ekspresi reguler diganti dengan penggantian yang disediakan

Metode ini mengambil parameter berikut

Garis miring ke depan / /_ menandai awal dan akhir ekspresi reguler

function removeHttp(url) {
  return url.replace(/^https?:\/\//, '');
}

Tanda sisipan http://0 cocok dengan awal input, dengan kata lain, string harus memulai http(s)

Tanda tanya http://_1 cocok dengan item sebelumnya http://2 atau http://3 kali. Dalam contoh, tanda tanya membuat http://4 karakter opsional

Terakhir, kita harus menghindari garis miring ke depan menggunakan garis miring terbalik

Argumen kedua yang kami berikan ke metode replace() adalah pengganti untuk pencocokan regex

Kami menggunakan string kosong karena kami ingin menghapus bagian http://

Jika Anda memerlukan bantuan untuk membaca ekspresi reguler, lihat lembar contekan ekspresi reguler ini dari MDN

Ini berisi tabel dengan nama dan arti dari setiap karakter khusus dengan contoh

Jika Anda ingin menghindari penggunaan ekspresi reguler, gunakan metode http://7 sebagai gantinya

Hapus 'http. //' atau 'https. //' dari URL menggunakan startsWith

Untuk menghapus http:// atau https:// dari URL

1. Periksa apakah URL dimulai dengan https:// atau http://
2. Jika ya, gunakan metode https://2 untuk mendapatkan bagian dari URL setelah protokol https://3

Kami pertama-tama memeriksa apakah URL dimulai dengan https://

Jika ya, kami menggunakan String. slice() metode untuk mendapatkan bagian dari URL setelah protokol

Satu-satunya argumen yang kami berikan ke metode https://_5 adalah indeks awal - indeks dari karakter pertama yang dimasukkan ke dalam string

Kami menggunakan panjang string http:// atau https:// untuk menentukan indeks awal, supaya kami dapat menghindari hardcoding angka ajaib

Pernah bertanya-tanya bagaimana cara memvalidasi URL dalam JavaScript? . Di internet, halaman web, gambar, dan video dapat dikenali dari URL-nya (Uniform Resource Locators). Mereka digunakan untuk mengirim email, mentransfer file, dan melakukan berbagai tugas lainnya. Namun, URL yang tidak dikenal dapat berisiko karena dapat mengarahkan pengguna menjauh dari situs web yang aman dan menuju situs web yang berbahaya. Mereka juga dapat membuat sejumlah jalur serangan, seperti pemalsuan permintaan sisi server dan injeksi skrip berbahaya (SSRF). Artikel ini akan membahas secara mendalam tentang cara memvalidasi URL dalam JavaScript menggunakan dua metode. Pembuat URL dan regex

Saat Anda membuat masukan URL dengan nilai tipe yang sesuai, url, Anda mendapatkan validasi otomatis bahwa teks yang dimasukkan dalam bentuk yang tepat untuk menjadi URL yang sah. Proses ini dapat mengurangi kemungkinan pengguna salah mengetik alamat situs web mereka atau memberikan alamat yang tidak valid

URL harus dibentuk dengan baik, yang artinya harus mematuhi semua protokol HTTP atau HTTPS. Itu juga perlu menunjuk ke sumber daya karena URL tanpa sumber daya terkait tidak valid. Sebagian besar browser web menempatkan bilah alamat di atas halaman yang menampilkan URL situs web. Contoh URL standar mungkin http://www.example.com/index.html yang menunjukkan protokol (http), nama host (www.example.com), dan nama file (indeks. html)

Aplikasi dapat menyertakan spesifikasi tambahan selain memiliki URL yang "valid". Misalnya, hanya menerima http. atau https. dan menolak file. dan URL lainnya. Ini mungkin baik-baik saja tergantung pada aplikasinya, tetapi mencari tahu membutuhkan beberapa pekerjaan desain yang aktif. Untuk mengatasi kesulitan pengguna dan membuat rekomendasi, ada baiknya juga mengetahui mengapa validasi URL gagal

Memvalidasi URL dengan konstruktor URL

Browser menyediakan konstruktor URL untuk mengurai dan membuat objek URL yang menyediakan akses terstruktur ke bagian-bagiannya. Kami dapat menggunakan konstruktor untuk memvalidasi URL dalam JavaScript karena akan menimbulkan kesalahan jika URL tidak valid. Akses terstruktur kemudian dapat menyetujui atau menolak berdasarkan komponen khusus aplikasi

Sebuah string diteruskan ke konstruktor URL dengan kata kunci baru. Jika string adalah URL yang valid, ia mengembalikan objek URL baru yang berisi data seperti host, nama host, href, asal, protokol, dll. Jika tidak, itu mengembalikan kesalahan

const isUrlCorrect = new URL("https://www.turing.com/");
console.log(isUrlCorrect)

Saat kami memasukkan isUrlCorrect ke konsol, kami mendapatkan respons berikut

Mari kita lihat respons yang kita dapatkan saat mengirimkan string URL yang tidak valid

const isUrlCorrect = new URL("turing");
console.log(isUrlCorrect)

Kami mendapatkan TypeError karena "turing" bukan URL yang valid.

Membuat fungsi validator URL dengan konstruktor URL

Kita dapat membuat fungsi validator URL dengan membuat fungsi isUrlValid khusus menggunakan konstruktor URL dan mencoba. pernyataan tangkapan

function isUrlValid(string) {
 try {
   new URL(string);
   return true;
 } catch (err) {
   return false;
 }
}

Ketika string diteruskan sebagai argumen ke fungsi isUrlValid adalah URL yang valid, ia mengembalikan nilai true. Jika tidak, itu mengembalikan false

Hanya memvalidasi URL HTTP dengan konstruktor URL

Selain memeriksa apakah URL valid, kami mungkin ingin menentukan apakah string tersebut adalah URL HTTP yang sah dan mencegah URL sah lainnya seperti "mailto. /mail@turing. com. "

Melihat gambar di atas, kita dapat melihat bahwa nilai dari properti protokol adalah https. Kita dapat memeriksa atribut protokol objek URL untuk menentukan apakah suatu string adalah URL HTTP yang sah

Jadi, dengan memanfaatkan konstruktor URL dan mencoba. catch seperti yang kita lakukan sebelumnya, kita akan membuat fungsi validator URL dengan membuat fungsi custom isHttpValid

function isHttpValid(str) {
 try {
   const newUrl = new URL(str);
   return newUrl.protocol === 'http:' || newUrl.protocol === 'https:';
 } catch (err) {
   return false;
 }
}
console.log(isHttpValid('https://www.turing.com/')); // true
console.log(isHttpValid('mailto://turing.com')); // false

Apa yang kita lakukan di sini? . " atau "https. ," mengembalikan true jika benar dan false jika tidak

Memvalidasi URL menggunakan regex

Ekspresi reguler atau validasi URL regex adalah cara lain untuk memvalidasi URL dalam JavaScript. Semua URL yang valid mengikuti pola tertentu. protokol, nama domain, dan jalur. Terkadang pencari fragmen atau string kueri mengikuti jalur. Anda dapat menggunakan regex untuk mencari pola tersebut dalam sebuah string jika Anda mengetahui pola yang membentuk URL. String lulus uji regex jika polanya ada. Jika tidak, itu gagal

Kami juga dapat menggunakan ekspresi reguler untuk meminta HTTPS sebelum kami memeriksa URL

function isUrlValid(str) {
 const pattern = new RegExp(
   '^(https?:\\/\\/)?' + // protocol
     '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
     '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR IP (v4) address
     '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
     '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
     '(\\#[-a-z\\d_]*)?$', // fragment locator
   'i'
 );
 return pattern.test(str);
}

Ekspresi reguler dalam fungsi isUrlValid di atas menentukan apakah suatu string adalah URL yang valid

Ekspresi reguler memungkinkan Anda mendeteksi URL yang tidak valid dalam string input. Namun, regex rumit dan tidak praktis dalam situasi dunia nyata karena dapat menantang untuk membaca, menskalakan, dan men-debug. Perpustakaan seringkali merupakan pilihan yang lebih baik karena ini

Kesimpulan

Pada artikel ini, kami membahas apa itu URL yang divalidasi dan seperti apa tampilannya. Kami juga membahas risiko yang ditimbulkan oleh URL yang tidak dikenal pada aplikasi web. Kami mulai dengan memanfaatkan konstruktor URL untuk melakukan validasi URL sederhana dan menunjukkan cara menggunakannya untuk memeriksa validitas URL. Kemudian, kami mendemonstrasikan cara memindai URL untuk mendapatkan informasi paling dasar dan penting yang diperlukan, seperti semua URL yang berisi protokol, nama domain, dan jalur, menggunakan metode ekspresi reguler. Kami juga mengeksplorasi kompleksitas dan kesulitan menggunakan ekspresi reguler untuk memvalidasi URL

Bagaimana cara mengetahui http atau https?

Bagaimana cara memeriksa URL dalam JavaScript?

Bagaimana cara mengubah http menjadi https menggunakan javascript?

Bagaimana saya tahu jika sebuah string dimulai dengan https?