Differences between escaping and URL encoding non-ASCII characters in JavaScript

  • Scenario: Developing an HTML web page using jade, node.js, and JavaScript
  • The image URLs contain spaces and non-ASCII characters
  • I am struggling with encoding these strings properly, debating between escape and encodeURIComponent functions.
  • Currently, I am leaning towards using escape to handle spaces specifically.

However, I am uncertain about the best approach and whether to use escape or encodeURIComponent. Despite researching online resources, I still find myself confused.

If anyone has any insights or recommendations on when each method should be used, please share your thoughts.

Answer №1

  • escape() does not encode: @*/+

  • encodeURI() does not encode: ~!@#$&*()=:/,;?+'

  • encodeURIComponent() does not encode: ~!*()'

To learn more, check out these related questions:

How to Encode a URL in JavaScript?

When should you use escape instead of encodeURI / encodeURIComponent?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am interested in showcasing only the week and day in the FullCalendar plugin

I have been working on customizing the fullcalendar plugin in JQuery which can be found at arshaw.com. By default, this plugin displays the entire month and week. However, I am specifically interested in only displaying the week and day views. Even after ...

Issues with retrieving $_POST values from a select form in PHP

When the button is clicked, I am sending a AJAX request to my PHP page using POST method with the selected data from a SELECT element. However, I am facing an issue where my PHP IF statements are not evaluating as true. It always defaults to the ELSE condi ...

Is there a way to find the TextArea element on Facebook's home page using a Selenium locator? Could it possibly be using jQuery

Sign in using any of our Facebook login details. Upon successful login, you will be directed to the page below. Query: Can you spot the "What's on your mind" or "continue to post" text box? I need to find the text box, input text, and then click on ...

How to transform an image into a base64 string using Vue

I am having trouble converting a local image to base64. The function reader.readAsDataURL is not working for me. Instead of the image data, I always get 'undefined' assigned to the rawImg variable. The file variable contains metadata from the upl ...

JavaScript: Implementing a for loop to dynamically adjust CSS properties

How can I adjust the margin-top property of the ball element when clicking a button? Below is my current code, but it's not working as expected. Can you help? let ballMargin = ball.style.marginTop; moveButton.addEventListener('click', funct ...

The value remains constant until the second button is pressed

I have a button that increments the value of an item. <Button bsStyle="info" bsSize="lg" onClick={this.addItem}> addItem: addItem: function() { this.setState({ towelCount: this.state.towelCount - 2, koalaCount: this.state.koalaCount + 2 ...

Encountering issues with ng-repeat in the third iteration

Having Trouble with ng-repeat on the Third Loop (Third Level) <div ng-repeat="child in jdata.children"> <div ng-repeat="childsub in child.children"> <div ng-repeat="text in childsub.text"> {{ text.va ...

Oops! You can only have one parent element in JSX expressions

I'm working on creating a password input box, but I keep encountering an error when integrating it into my JS code. Here's the snippet of my code that includes TailwindCSS: function HomePage() { return ( <div> <p className=&q ...

The canvas's document.getElementById function is unable to find any matching element,

Hello everyone, I am currently diving into the world of javascript and trying to expand my knowledge. However, I have encountered a problem that has me stumped, and I could really use some assistance. While exploring, I came across this page: http://www.w ...

Can jQuery Alignment be Adjusted Based on the Size of the Browser Window?

After browsing through several websites, I managed to create a basic pop-up box using javascript to showcase my contact details. While I am content with its functionality, I have encountered an issue where the popup window is positioned absolutely rather t ...

Send XML information to receive an XML reply

Is there anyone who can provide me with a sample code for supporting the API from pingbid.net? I need to post the required data and retrieve the xml. I have included my code below, can someone please assist me? <?php $url ="https://pingbid.net/leads/a ...

Changing the value in a textbox by altering a select option involves adjusting the input based on the selected

Is there a way to update the input value when a new option is chosen from a select dropdown menu? Click here to view an image. The goal is to have a different number of image upload fields based on the selected ad package (e.g., free package has 0 images ...

Basic AngularJS framework with minimal external dependencies

I have been searching for an AngularJS skeleton to set up my project, but it seems like all the skeletons I find online require the installation of numerous dependencies through npm and/or bower. Due to security concerns at the firm where I am working on ...

Product sketching libraries in JavaScript

Can somebody assist me in locating a suitable JS library that is capable of generating a product sketch similar to this one: Partition sketch? I am currently using Next.js, and I am encountering difficulties with most libraries due to Next.js utilizing SSR ...

Sending the content of a textBox to a JavaScript function

Although my question may be somewhat outdated, after exhausting all possible solutions, I am still unable to find a resolution. I am trying to create a function for verifying input fields: This particular function is functioning correctly: function myFu ...

Encountering an error while trying to launch Chrome with Puppeteer

Currently, I have set up an elastic-beanstalk instance on AWS and am in the process of creating a pdf export feature on a dashboard using Puppeteer. Although I have successfully tested the application locally, I encountered an error when attempting to run ...

What is the best way to design a timetable schema in MongoDB specifically for a Teacher Schema?

Greetings to all in the StackOverflow community! I am here seeking some innovative ideas for a project I am currently working on. One of the challenges I'm facing involves storing available days within a Teacher Schema. In this application, a Teacher ...

I am looking to pair a unique audio clip with each picture in my collection

I have implemented a random slideshow feature that cycles through numerous images. I am now looking to incorporate a brief audio clip with each image, synchronized with the array I have established for the random pictures. The code snippet below is a simil ...

Detach attention from TextField select component in Material UI and React through manual means

When I create a select input using the TextField component from Material-UI library, I need to manually remove focus after an option is selected. I attempted to achieve this by using a reference to the TextField with the 'inputRef' prop. However, ...

React component not displaying HERE map controls

Having trouble implementing zoom in and zoom out controls on HERE maps in React. Despite following the documented steps, I am unable to find a solution. I have meticulously followed all instructions provided at: The link to my map component can be found ...