The encodeURIComponent function does not provide an encoded URI as an output

Looking to develop a bookmarklet that adds the current page's URL to a specific pre-set URL.

javascript:(function(){location.href='example.com/u='+encodeURIComponent(location.href)}());

Even though when I double encode the returned URL using

encodeURIComponent(encodeURIComponent(location.href))
, it works fine. Can someone explain why doubling encodeURIComponent has this effect?

Answer â„–1

You can attempt the following solution:

const generateUrl = (param) => {return 'website.com?q='+encodeURIComponent(param)}

To receive the encoded URL, execute generateUrl.

const encodedUrl = generateUrl(location.href)

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

Utilizing form data to upload images and send them back to the front end within a React js application

I am working on a project using NestJS and React JS to create an image uploader. In React, I have the following setup: const props = { onChange({ file, fileList }: any) { const fd = new FormData(); fd.append('img& ...

Transferring a large volume of JSON objects to a database using API post requests

Currently, I'm faced with the challenge of sending a large amount of JSON objects to a database through API post calls. However, upon attempting to send all these objects individually, I encounter numerous HTTP errors, predominantly 400 errors. My in ...

Exploring the Dynamic Display of Nested JSON Objects in Angular 6

Struggling with a complex issue and feeling lost on how to approach it. I'm currently working with Angular 6. The challenge at hand involves handling JSON data in my project. While accessing simple data like "id" or "certificate" is easy, I'm en ...

Tips for implementing events with AngularJS Bootstrap Colorpicker

I am having trouble understanding how events function with Angular Bootstrap Colorpicker. I have forked a Plunker from the developer's example. Unfortunately, there are no examples provided for using events. It would be great if events like colorpick ...

Using TypeScript arrow function parentheses in the filter function

If I have an array of movie objects like this: const movies: Movie[] = [ movie1, movie2, movie3, movie4 ]; And if I want to remove a specific movie from the array, such as movie2, I can use the following code: movies = movies.filter( m => m !== ...

The useNavigate() hook from react-router-dom is not properly setting the id in the URL path

I am currently using react-router-dom v6 for my routing needs. My goal is to pass an ID in the navigate URL path. Here is the onClick method and button code that I am working with: let navigate = useNavigate(); const routeChange = (id) => { let ...

Difficulty encountered when attempting to utilize keyup functionality on input-groups that are added dynamically

I've exhausted all available questions on this topic and attempted every solution, but my keyup function remains unresponsive. $(document).ready(function() { $(document).on('keyup', '.pollOption', function() { var empty = ...

Using VueJS: Passing a variable with interpolation as a parameter

Is there a way to pass the index of the v-for loop as a parameter in my removeTask function? I'm looking for suggestions on how to achieve this. <ol class="list-group"> <li v-for="task in tasks" class="list-group-item"> ...

Adjustable Scroll Bar

Could anyone help me find a component similar to the resizable scrollbar on Google Finance? Check out this link: http://www.google.com/finance?q=EURUSD&ei=bhM_UKDXF-aIWqAPVNQ You can see it below the chart. If you know where I can find something like ...

The background-color of a single child within an absolutely positioned element in Chrome may not be displayed if the element has a z-index and overflow scrolling

This test page has been created to showcase the issue: <html> <head> <style> .panel { position: absolute; width: 326px; max-height: 200px; overflow: scroll; z-index: 1000; } .item-container { width: 100%; list-style: none; ...

Parsing JSON data in JavaScript with multiple objects

I just received a JSON Object from an HTTP request [ { "location": { "name": "Seattle, WA", "lat": "47.604", "long": "-122.329", "timezone": "-7", "alert": "", "degreetype": "F", "imagerelativeurl": "http:&b ...

Having trouble with expressJs router.post() not functioning properly with multiple middleware, resulting in an [object Undefined] error

I have been working on developing a REST API for my users, utilizing express-validator for validation before adding the user to the database. However, I encountered an issue while chaining my middleware in the router.py file which resulted in the error Err ...

Is it possible to derive the language code without using the Common Locale Data Repository from a rough Unicode text

I am currently developing a dictionary application. One of the features I am working on involves identifying the language of a Unicode character when entered by a user. For example: 字 - would return ['zh', 'ja', 'ko'] ا٠...

Having trouble triggering a change event within a React component?

I'm working on a straightforward react-component that consists of a form. Within this form, the user can search for other users. To ensure the form is valid, there needs to be between 3 and 6 users added. To achieve this, I've included a hidden ...

The tilesloaded event in google.maps.event.addListener is unexpectedly failing to trigger

Today, while testing popover messages on my cordova/ionic app, I compiled the app and noticed that the maps weren't loading. Instead, only my custom "Loading map..." spinning icon kept showing. Upon investigating further, I found that var setMap = n ...

The DeprecationWarning occurs when setting "options.headless = True" while updating Selenium Python to version 4.8.0

After meticulously following the recommended changes, I am still encountering issues. Could there be other bugs that need to be addressed? https://www.selenium.dev/blog/2023/headless-is-going-away/ import time import pandas as pd from selenium import we ...

TypeScript Implementation of ES6 Arrow Functions

Just diving into Typescript, I'm struggling to figure out the solution. I tried researching and looked into destructuring, but still unable to make it work. import React from "react"; import { StyleSheet, Text, View } from "react-native"; const st ...

PHP: Communicating Data with JavaScript

What if my PHP script requires some time to complete its operations? How can I keep the client updated on the progress of the operation, such as during a file download where the estimated time and data size need to be communicated? In PHP, calculating all ...

steps to retrieve JSON object using Angular service

In the login.js file, I have a module with a method called loginUser structured like this: ...function loginUser(){ var user={ email:loginVM.Email, password:loginVM.pwd }; console.log(user); loginService.login ...

Can someone explain the inner workings of the Typescript property decorator?

I was recently exploring Typescript property decorators, and I encountered some unexpected behavior in the following code: function dec(hasRole: boolean) { return function (target: any, propertyName: string) { let val = target[propertyName]; ...