Is it just me or does escape() not work reliably?

Question

Is it just me or does escape() not work reliably?

With the use of JavaScript, I am able to generate HTML code dynamically. For instance, I can add a function that triggers when a link is clicked, like so:

$('#myDiv').append('<a href="javascript:start(\''+TERM+'\');">click</a>');

Therefore, start() will be executed upon clicking the link. The variable TERM could contain a single word such as world or moody's. In this case, the generated HTML code would appear as follows:

<a href="javascript:start('world');">click</a>

OR

<a href="javascript:start('moody's');">click</a>

As illustrated above, the second example will not function correctly. Therefore, I have decided to "escape" the TERM, like this:

$('#myDiv').append('<a href="javascript:start(\''+escape(TERM)+'\');">click</a>');

Upon inspecting the HTML source-code using Firebug, it is evident that the following code was produced:

<a href="javascript:start('moody%27s');">click</a>

This solution works well until the link is actually clicked - at which point the browser (in this case Firefox) seems to interpret the %27 and attempts to execute start('moody's');

Is there a way to persistently escape the term without interpreting the %27 before the term is processed in JS? Are there alternative solutions besides utilizing regular expressions to convert ' to \'?

javascript string browser escaping

Answer 1

Answer №1

Avoid attempting to create inline JavaScript as it can lead to excessive pain and difficulties with maintenance. Instead, opt for standard event binding routines.

If you are using jQuery and not another library that uses the same variable name:

$('#myDiv').append(
    $('<a>').append("click").attr('href', 'A sensible fallback').click(function (e) {
        alert(TERM); // Since I lack the function you were calling
        e.preventDefault();
   })
);

For reference, check out http://jsfiddle.net/TudEw/

Answer 2

Avoid attempting to create inline JavaScript as it can lead to excessive pain and difficulties with maintenance. Instead, opt for standard event binding routines.

If you are using jQuery and not another library that uses the same variable name:

$('#myDiv').append(
    $('<a>').append("click").attr('href', 'A sensible fallback').click(function (e) {
        alert(TERM); // Since I lack the function you were calling
        e.preventDefault();
   })
);

For reference, check out http://jsfiddle.net/TudEw/

Answer 3

Answer №2

escape() is primarily used for url-encoding data, not for incorporating it into a string literal. Your code has multiple flaws that need to be addressed.

Instead of trying to "inject" JavaScript code into your markup, use onclick events when needed. If you have a "string" stored in a variable, avoid substituting values unless necessary for generating URLs or other specific purposes.

var element = $('<span>click</span>');
element.bind('click', function () { start(TERM); });
$('#myDiv').append(element);

If you're unfamiliar with how these functions work, take the time to understand the basics of events and function references in JavaScript.

Answer 4

escape() is primarily used for url-encoding data, not for incorporating it into a string literal. Your code has multiple flaws that need to be addressed.

Instead of trying to "inject" JavaScript code into your markup, use onclick events when needed. If you have a "string" stored in a variable, avoid substituting values unless necessary for generating URLs or other specific purposes.

var element = $('<span>click</span>');
element.bind('click', function () { start(TERM); });
$('#myDiv').append(element);

If you're unfamiliar with how these functions work, take the time to understand the basics of events and function references in JavaScript.

Answer 5

Answer №3

The escape() function is specifically designed for escaping URLs to be passed over a network, not for strings in general. I am not aware of any built-in JavaScript function that escapes strings, but you can give this online solution a try: .

Here is how you can use it: EscapeSingleQuotes(strString)

Update: I see your mention of regular expressions. While this solution does involve regular expressions, there is nothing inherently wrong with using them :-)

Answer 6

The escape() function is specifically designed for escaping URLs to be passed over a network, not for strings in general. I am not aware of any built-in JavaScript function that escapes strings, but you can give this online solution a try: .

Here is how you can use it: EscapeSingleQuotes(strString)

Update: I see your mention of regular expressions. While this solution does involve regular expressions, there is nothing inherently wrong with using them :-)

Is it just me or does escape() not work reliably?

Answer №1

Answer №2

Answer №3

Similar questions

Navigating Angular: Discovering Route Challenges in Less Than an Hour

Using Jquery and Ajax to add information to a database

JavaScript Equivalent to C#'s BinaryReader.ReadString() Function

To continue receiving rxjs updates, kindly subscribe if the specified condition is met

What separates the onclick functionality of buttons from that of divs?

Divide the string into two halves and display them in separate div elements

Exploring Head-Linked/Off-center View in Three.js

Using JavaScript to Filter Arrays with Partial String Matching

What is the clarification regarding accessing JSON from various domains?

Search for a specific folder and retrieve its file path

Encountering a 403 error while attempting to install Meteor with npm using the command npm install -

JQuery's document.ready function triggers prematurely on dynamically loaded HTML content

Divide matplotlib title into two lines including non-ASCII characters and LaTeX symbols

Is there a way to retrieve two distinct data types from a single ng-model within a select option?

Guide on closing a Bootstrap modal by clicking within the UI Grid in Angular

JavaScript if statement can be used to evaluate two variables that have the same values

Issue with Auth0 not properly redirecting to the designated URL in a React application

A Guide to Effortlessly Implementing moment.js into a React TypeScript Application

Form Validation in JavaScript Continues to Submit Form Even When 'False' is Detected

Stop React router from changing routes when the back button is pressed and also close any open pop