'Javascript with Special Chartecter

I have a html page in which I need to pass a String variable to javascript function. This works until String does not have a special charecter.

<html>
    <head>
        <script>
            function test(v){
                alert(v);
            }
        </script>
    </head>
    <body>
        <input type="button" value="Test Button" onClick="test('BlahBlah')"/>
    </body>
</html>

As soon as I change onClick like below, it stops working.

onClick="test('Blah'Blah')"

Any solution for this problem. Please take a note parameter which is being passed to JavaScript function is dynamic.Source of Parameter is backend and I cannot change that peice of code. Second thing even if put escape it still does not work. My problem is I have to retian the special charecter for some processing at backend

javascripthtml


Solution 1:[1]

There are two layers to this:

  1. The content of onClick attributes, like all attributes, is HTML text. That means that any character that's special in HTML (like <) must be replaced with an HTML entity (e.g., &lt;). Additionally, if you use double quotes around the attribute value, any double quotes within the value must be replaced with entities (&quot;); if you used single quotes around the attribute, you'd need to replace ' with &apos;.

  2. Your attribute contains a JavaScript string literal. That means that any characters that are special inside JavaScript string literals must be escaped according to the JavaScript rules. Since you've used single quotes to delimit the JavaScript string, for instance, you have to escape any single quotes in the string with a backslash.

I'm assuming that HTML is generated server-side. If so, the work above must be done server-side, when building the HTML of the page. You haven't said what server-side tech you're using, so it's hard to point you at solutions that your server-side tech/environment might provide.

In the simple case of your

onClick="test('Blah'Blah')"

...you just need to add the backslash within the JavaScript string

onClick="test('Blah\'Blah')"

...but that's just that one specific case.

The dramatically simpler option is to not put JavaScript code in attribute values. Instead, use modern techniques (addEventListener, attachEvent) to hook up JavaScript code.

But if you must use an onClick attribute, avoid having text in it (or deal with the complexities above); have it call a function defined in a script element that then has the text, as you then have only the one layer (#2 above) to deal with.

Source of Parameter is backend and I cannot change that peice of code.

That backend is broken and needs fixing.

If:

  • the backend is only producing invalid JavaScript code (not invalid HTML)
  • and the code consists of a single function call
  • and the code is always a single function call
  • and the function call always has a single string literal argument
  • and that argument is always delimited with single quotes
  • and the single quotes within the string are never correctly escaped

...we might be able to salvage it client-side. But my guess is that the backend will also produce invalid HTML, for instance when the text has a " in it. (We can't do anything about that, because the attribute value will be chopped off at that point.)

But let's keep a good thought: Given the ridiculous list of caveats above, this might do it:

var elm = document.getElementById("the-div");
var code = elm.getAttribute("onclick");
var m = code.match(/^([^(]+)\('(.*)'\)$/);
if (m) {
    code = m[1] + "('" + m[2].replace(/'/g, "\\'") + "')";
}
elm.setAttribute("onclick", code);

Live Example:

function foo(str) {
  alert(str);
}

var elm = document.getElementById("the-div");
var code = elm.getAttribute("onclick");
var m = code.match(/^([^(]+)\('(.*)'\)$/);
if (m) {
    code = m[1] + "('" + m[2].replace(/'/g, "\\'") + "')";
}
elm.setAttribute("onclick", code);
<div id="the-div" onclick="foo('blah'blah')">Click me</div>

Solution 2:[2]

Well this is an very common problem you wanted to add single quotes inside single quotes to do this you have to escape that Sigle quotes to do that you have to put an forward slash.

onClick="test('Blah\'Blah')"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Evil-Coder

Related Questions