Hapus url dari string javascript

Metode pushState()_ atau replaceState() dari objek JavaScript history dapat menghapus hash (#) dari URL. Metode ini memperbarui URL saat ini tanpa memuat ulang. Begitulah cara kami menghilangkan hash URL dengan memperbaruinya

Mari kita lihat bagaimana kita dapat menerapkan metode ini dalam proyek kita dengan beberapa contoh

Hapus Hash Dari URL (window. lokasi) dalam JavaScript

Kami memiliki location.hash properti di JavaScript yang dapat mengatur dan mendapatkan nilai hash dari URL di browser. Jika Anda mencoba menghapus hash dengan menyetel nilai properti ini sebagai string kosong, ini tidak akan berfungsi

          location.hash = "";

// From: https://example.com/product#reviews
// To: https://example.com/product
        

Saya hanya akan menghapus nilai hash. Tetapi URL akan tetap berisi simbol (#). Itu sebabnya ini bukan solusi ideal untuk masalah ini

Metode pushState()_ sangat cocok untuk mendapatkan hasil yang diinginkan. Itu tidak hanya menghilangkan nilai tetapi juga simbol hash dari URL

          history.pushState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

Metode ini terutama digunakan untuk mengubah URL saat ini menggunakan JavaScript di browser. Kami dapat mengambil hash dari URL saat ini dengan mengubahnya

Untuk itu, Anda perlu membuat jalur URL baru dengan menggabungkan properti

          history.pushState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

          history.pushState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

Saat JavaScript mengeksekusi metode, itu akan membawa Anda ke URL baru tanpa nilai hash

          history.replaceState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

Kita juga dapat menggunakan metode replaceState()_ alih-alih menggunakan pushState() dari objek history. Ini akan memberi Anda hasil yang sama

Satu-satunya perbedaan adalah tidak seperti metode pushState(), metode ini tidak menambahkan riwayat baru ke browser. Artinya, ketika kita mengubah URL menggunakan metode replaceState(), kita tidak dapat kembali ke halaman sebelumnya dengan mengklik tombol "Kembali" di browser

Baca Juga. Cara Memeriksa Nilai Hash (#) di URL Menggunakan JavaScript

Hapus Hash Dari String URL Menggunakan JavaScript

Jika Anda memiliki URL sebagai string, Anda juga dapat menghapus hash darinya. Saya akan menunjukkan kepada Anda 2 metode untuk menyelesaikan pekerjaan

Metode 1. Gunakan Pembuat URL()

Anda dapat membuat objek URL dari string menggunakan konstruktor

          history.pushState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

Ini akan mengembalikan objek tempat Anda dapat mengakses properti

          history.pushState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

          const url = "https://example.com/product#reviews";

const urlObj = new URL(url);

urlObj.hash = "";

console.log(urlObj.href);
// https://example.com/product
        

Saat Anda menyetel string kosong untuk properti

          history.pushState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

          history.pushState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

Metode 2. Gunakan metode substring()

Anda juga dapat menggunakan metode string JavaScript untuk mendapatkan hasil yang sama. Untuk itu, kita harus menggunakan gabungan metode

          history.replaceState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

          history.replaceState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

URL berisi nilai hash di bagian akhir. Metode

          history.replaceState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

          history.replaceState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

          const url = "https://example.com/product#reviews";

const updatedUrl = url.substring(0, url.lastIndexOf("#"));

console.log(updatedUrl);
// https://example.com/product
        

Saya menemukan indeks dan mendapatkan string URL ke indeks hash. Dengan cara ini, Anda dapat menghapus hash dari sebuah string. Sekarang, Anda dapat mengalihkan ke URL yang diperbarui dalam JavaScript dengan objek

          history.replaceState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

Kesimpulan

Kami telah melihat beberapa metode untuk menghilangkan nilai hash dari URL. Anda dapat menerapkan metode ini untuk URL saat ini di browser atau URL string

Anda dapat mengambil nilainya dengan menggunakan metode

          history.replaceState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

          history.replaceState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

Bagaimana cara menghapus tautan dari string dalam JavaScript?

Bagaimana Anda menghapus URL dari teks?

Bagaimana cara menghapus http dari URL di JavaScript?

Bagaimana cara menghapus sesuatu dari URL?