Cara menangani karakter khusus di url di javascript

Perhatian khusus mungkin perlu diberikan saat memuat dokumen ke Server MarkLogic di mana URI dokumen berisi satu atau beberapa karakter khusus. Pada artikel ini, kita akan menelusuri skenario di mana pengecualian dilemparkan jika URI dengan karakter khusus tersebut tidak ditangani dengan benar dan kemudian kita akan berbicara tentang cara menangani URI tersebut. Artikel ini akan memanfaatkan fungsi bawaan (dan metode enkode kelas java.net.URLEncoder) dan menampilkan penggunaannya melalui beberapa contoh yang dibuat menggunakan XCC/J untuk memahami skenario ini dan pendekatan yang disarankan

Hubungan antara URI dan URL

Uniform Resource Identifier (URI) adalah rangkaian karakter kompak yang mengidentifikasi sumber daya abstrak atau fisik. Bentuk URI yang paling umum adalah Uniform Resource Locator (URL)

URL adalah URI yang, selain untuk mengidentifikasi sumber daya web, menentukan cara bertindak atas atau mendapatkan representasi, menentukan mekanisme akses utamanya dan lokasi jaringan. Misalnya, URL 'http://example.org/wiki/Main_Page_' mengacu pada sumber daya yang diidentifikasi sebagai /wiki/Main_Page yang representasinya, dalam bentuk HTML dan kode terkait, dapat diperoleh melalui HyperText Transfer Protocol (http) dari host jaringan yang nama domainnya adalah example.org.  

Meskipun memuat dokumen ke Server MarkLogic dapat dilakukan, dengan URI dokumen berisi karakter khusus yang tidak dienkode, sebaiknya ikuti praktik terbaik dengan mengenkode URL URI dokumen karena ini akan membantu Anda merancang aplikasi yang kuat, bebas dari efek samping yang disebabkan oleh hal tersebut.

Pengkodean URL, juga dikenal sebagai pengkodean persen, adalah proses pengkodean karakter khusus dalam URL untuk membuat data yang dikirimkan lebih aman dan andal. Ini membantu menghindari serangan lintas situs saat memanggil layanan web jarak jauh

Ada dua jenis karakter dalam URL. dipesan dan tidak dipesan. Karakter yang dicadangkan adalah karakter yang memiliki arti khusus di dalam URL. Misalnya, ?, /, #, :, dll. adalah karakter yang dicadangkan dan tidak boleh menjadi bagian dari string kueri atau segmen jalur

Karakter tanpa pagu harga tidak memiliki arti khusus. Dalam pengkodean URL, karakter ini diubah menjadi urutan karakter khusus

Pada artikel ini, Anda akan mempelajari cara menyandikan URL menggunakan fungsi bawaan JavaScript. JavaScript menyediakan dua fungsi untuk membantu Anda menyandikan URL. encodeURI() dan encodeURIComponent(). Kedua metode ini dimaksudkan untuk digunakan untuk kasus penggunaan yang berbeda. Mari kita mulai dengan yang pertama

encodeURI() metode

Metode encodeURI()_ menyandikan URL lengkap. Diasumsikan bahwa masukan adalah URL lengkap dengan beberapa karakter khusus yang memerlukan penyandian. Oleh karena itu, tidak menyandikan karakter yang dicadangkan (

const url = 'http://example.com/!learn javascript$/'

// encode complete URL
const encodedUrl = encodeURIComponent(url)

// print encoded URL
console.log(encodedUrl)

// output: http%3A%2F%2Fexample.com%2F!learn%20javascript%24%2F
2)

Mari kita lihat sebuah contoh

const url = 'http://example.com/!learn javascript$/'

// encode complete URL
const encodedUrl = encodeURI(url)

// print encoded URL
console.log(encodedUrl)

// output: http://example.com/!learn%20javascript$/
_

encodeURIComponent() metode

Fungsi

const url = 'http://example.com/!learn javascript$/'

// encode complete URL
const encodedUrl = encodeURIComponent(url)

// print encoded URL
console.log(encodedUrl)

// output: http%3A%2F%2Fexample.com%2F!learn%20javascript%24%2F
4 harus digunakan untuk menyandikan satu komponen URL (seperti parameter string kueri) alih-alih URL lengkap. Ini menggunakan skema pengkodean
const url = 'http://example.com/!learn javascript$/'

// encode complete URL
const encodedUrl = encodeURIComponent(url)

// print encoded URL
console.log(encodedUrl)

// output: http%3A%2F%2Fexample.com%2F!learn%20javascript%24%2F
5 dan mengkodekan semua karakter dengan arti khusus kecuali
const url = 'http://example.com/!learn javascript$/'

// encode complete URL
const encodedUrl = encodeURIComponent(url)

// print encoded URL
console.log(encodedUrl)

// output: http%3A%2F%2Fexample.com%2F!learn%20javascript%24%2F
6

Jika Anda menggunakan encodeURIComponent() untuk menyandikan URL lengkap, semuanya, termasuk pemisah jalur (/), akan dikodekan seperti yang ditunjukkan di bawah ini

const url = 'http://example.com/!learn javascript$/'

// encode complete URL
const encodedUrl = encodeURIComponent(url)

// print encoded URL
console.log(encodedUrl)

// output: http%3A%2F%2Fexample.com%2F!learn%20javascript%24%2F

Idealnya, Anda harus menggunakan metode encodeURIComponent() hanya untuk menyandikan parameter string kueri atau segmen jalur. Ini sebuah contoh

const baseUrl = 'http://www.google.com/search?q='
const query = 'Nodejs & JavaScript'

// encode query string
const encodedQuery = encodeURIComponent(query)

// build full URL
const url = baseUrl + encodedQuery

// print full URL
console.log(url)

// output
// http://www.google.com/search?q=Nodejs%20%26%20JavaScript
_

Anda harus memanggil metode encodeURIComponent()_ untuk setiap parameter string kueri, yang mungkin menyertakan karakter khusus untuk menghindari kesalahan jaringan dan respons yang tidak terduga

Catatan. MDN menyarankan peningkatan untuk mematuhi standar RFC 3986 (yang mencadangkan

const baseUrl = 'http://www.google.com/search?q='
const query = 'Nodejs & JavaScript'

// encode query string
const encodedQuery = encodeURIComponent(query)

// build full URL
const url = baseUrl + encodedQuery

// print full URL
console.log(url)

// output
// http://www.google.com/search?q=Nodejs%20%26%20JavaScript
1,
const baseUrl = 'http://www.google.com/search?q='
const query = 'Nodejs & JavaScript'

// encode query string
const encodedQuery = encodeURIComponent(query)

// build full URL
const url = baseUrl + encodedQuery

// print full URL
console.log(url)

// output
// http://www.google.com/search?q=Nodejs%20%26%20JavaScript
2,
const baseUrl = 'http://www.google.com/search?q='
const query = 'Nodejs & JavaScript'

// encode query string
const encodedQuery = encodeURIComponent(query)

// build full URL
const url = baseUrl + encodedQuery

// print full URL
console.log(url)

// output
// http://www.google.com/search?q=Nodejs%20%26%20JavaScript
3,
const baseUrl = 'http://www.google.com/search?q='
const query = 'Nodejs & JavaScript'

// encode query string
const encodedQuery = encodeURIComponent(query)

// build full URL
const url = baseUrl + encodedQuery

// print full URL
console.log(url)

// output
// http://www.google.com/search?q=Nodejs%20%26%20JavaScript
4, dan
const baseUrl = 'http://www.google.com/search?q='
const query = 'Nodejs & JavaScript'

// encode query string
const encodedQuery = encodeURIComponent(query)

// build full URL
const url = baseUrl + encodedQuery

// print full URL
console.log(url)

// output
// http://www.google.com/search?q=Nodejs%20%26%20JavaScript
5 karakter) dengan menerapkan metode berikut

Bagaimana Anda menangani karakter khusus dalam URL?

Gunakan URLEncoder untuk menyandikan string URL Anda dengan karakter khusus. .
Karakter alfanumerik "a" sampai "z", "A" sampai "Z" dan "0" sampai "9" tetap sama
Karakter khusus". ", "-", "*", dan "_" tetap sama
Karakter spasi " " diubah menjadi tanda tambah "+"

Bagaimana cara menyandikan karakter khusus di URL dalam JavaScript?

Metode encodeURI() mengkodekan URI. .
Catatan. Gunakan metode decodeURI() untuk mendekode URI
Karakter spesial. Metode encodeURI() tidak menyandikan karakter seperti. , / ?. @ & = + $ * #.
Lihat juga. Metode encodeURIComponent() untuk menyandikan URI. Metode decodeURIComponent() untuk mendekode URI

Bagaimana cara membaca karakter khusus dalam JavaScript?

@#$%^&*. ,<>/\'";. ? . Jika string hanya berisi karakter khusus maka ia mengembalikan true , tetapi jika string berisi sesuatu yang lain seperti karakter alfanumerik (. Contoh 1 ,. example2 ) mengembalikan false

Bisakah kita memiliki karakter khusus di URL?

URL yang dimasukkan dalam bilah alamat di browser, misalnya, dapat berisi karakter khusus (e. g. "上海+中國" ); .