Special symbols used in a URL - searching for the uppercase Ø

Question

Special symbols used in a URL - searching for the uppercase Ø

Here is the URL I am working with:

my.website/?param1=Økonomi&param2=Penger

In order to retrieve the parameter values, I am using the following function:

function extractParamValue(url, key) {
    var parameters = {};
    var urlParams = url.split("?", 2);

    if (urlParams.length > 1) {
        var paramList = urlParams[1].split("&");
        paramList.map(function (paramString) {
            var keyValue = paramString.split("=", 2);
            parameters[keyValue[0]] = keyValue[1];
        });
    }
    return (key in parameters)? decodeURIComponent(parameters[key]) : ''
}

When I check the results after extracting, I see that the values returned are: param1 = %C3%98konomi and param2 = Penger

However, when I compare these values with my dataset, I am unable to find a match for Økonomi where Ø has a capital letter. Interestingly, if I change it to økonomi, then I do get a match.

Why is it that the encoded URI value %C3%98 is not translating to Ø? How can I ensure that it does in future queries?

javascript regex utf-8

Answer 1

Answer №1

Follow these steps:

const getQueryStringValue = (url, key) => 
    ((decodeURIComponent(url).split('?')[1] || '').match(new RegExp(`${key}=([^&]*)`)) || [,null])[1]

const url = encodeURIComponent('my.site/?param1=Økonomi&param2=Penger')
console.log(getQueryStringValue(url, 'param1'))
console.log(getQueryStringValue(url, 'param2'))
console.log(getQueryStringValue('my.site/', 'param2'))
console.log(getQueryStringValue('my.site/?param1=Økonomi&param2=Penger', 'param3'))

Browsers encode URLs using the encodeUriComponent function and you must decode them.

console.log(decodeURIComponent('%C3%98'))

Answer 2

Follow these steps:

const getQueryStringValue = (url, key) => 
    ((decodeURIComponent(url).split('?')[1] || '').match(new RegExp(`${key}=([^&]*)`)) || [,null])[1]

const url = encodeURIComponent('my.site/?param1=Økonomi&param2=Penger')
console.log(getQueryStringValue(url, 'param1'))
console.log(getQueryStringValue(url, 'param2'))
console.log(getQueryStringValue('my.site/', 'param2'))
console.log(getQueryStringValue('my.site/?param1=Økonomi&param2=Penger', 'param3'))

Browsers encode URLs using the encodeUriComponent function and you must decode them.

console.log(decodeURIComponent('%C3%98'))

Special symbols used in a URL - searching for the uppercase Ø

Answer №1

Similar questions

Tips for effectively passing state from a parent component to a child component without losing it

How to retrieve the value instead of the key/ID in a Laravel controller?

retrieving the value of an AngularJS variable based on which radio button

Steps to retrieve the content of a div element and store it in a variable in Ionic 4

What could be the reason for incorrect data being sent when using multi-select values with jQuery/A

Learn how to create text animations using CSS triggered by a scroll event listener

Insert a new row with a designated row class

What is the best way to generate a one-level breadcrumb using Jquery?

How to send configuration data to an external library in Angular 6 in the app.module.ts file

The object filtering process is experiencing issues due to the presence of a null value in the column

Creating an HTML5 input pattern specifically for validating Irish Vat Numbers

I'm confused as to why this is occurring even though the codes appear to be identical

Why is it possible for the EXPRESS+EJS template to access CONFIG without explicitly passing it when rendering?

Trouble with an external .js script

Instructions for uploading STL files in HTML with three.js

Unable to implement a filter on data retrieved through $http in Angular framework

I am looking to integrate a custom button that, when clicked, will launch the file explorer for me to choose a file. Once selected, the file name should automatically populate in the input field

Enhance your Verold model object with engaging animations

What is the best way to implement rate limiting for asynchronous API calls within a specific timeframe?

Be patient for the complete loading of the image during an AJAX operation