Escape quotes in JavaScript

Question

I'm outputting values from a database (it isn't really open to public entry, but it is open to entry by a user at the company -- meaning, I'm not worried about XSS).

I'm trying to output a tag like this:

<a href="" onclick="DoEdit('DESCRIPTION');">Click Me</a>

DESCRIPTION is actually a value from the database that is something like this:

Prelim Assess "Mini" Report

I've tried replacing " with \", but no matter what I try, Firefox keeps chopping off my JavaScript call after the space after the word Assess, and it is causing all sorts of issues.

I must bemissing the obvious answer, but for the life of me I can't figure it out.

Anyone care to point out my idiocy?

Here is the entire HTML page (it will be an ASP.NET page eventually, but in order to solve this I took out everything else but the problem code)

<html>
    <body>
        <a href="#" onclick="DoEdit('Preliminary Assessment \"Mini\"'); return false;">edit</a>
    </body>
</html>

It's a good idea to make your `onclick` event attachment unobtrusive and to move all of your database information into a data island. Things will be cleaner and you'll actually get some sort of syntax error when your strings are escaped wrong. — Justin Johnson, Jan 05 '10 at 04:40
Possible duplicate of *[How do I escape a string inside JavaScript code inside an onClick handler?](http://stackoverflow.com/questions/97578/how-do-i-escape-a-string-inside-javascript-code-inside-an-onclick-handler)*. — Peter Mortensen, May 04 '15 at 17:19
You can also use escape("string") and unescape("string") jquery methods — Abhiram, Apr 04 '19 at 16:31

score 242 · Accepted Answer · edited May 04 '15 at 17:05

242

You need to escape the string you are writing out into DoEdit to scrub out the double-quote characters. They are causing the onclick HTML attribute to close prematurely.

Using the JavaScript escape character, \, isn't sufficient in the HTML context. You need to replace the double-quote with the proper XML entity representation, ".

edited May 04 '15 at 17:05

Peter Mortensen

30,738
21
105
131

answered Jan 05 '10 at 04:34

Aaron

4,194
2
19
19

1

Right, but wouldn't that be this? edit I tried that, and it is still screwing up. This has got to be a simple WTF but for the life of me, I can't see it. – Matt Dawdy Jan 05 '10 at 04:35
Is there any built-in JavaScript function that would escape the double quotes ? Apart from 'quo"'.replace('"', '"') I can't find anything. – kevin Aug 18 '10 at 14:39
4

It's not a javascript issue, it's an HTML/XML encoding issue: you can't have double-quote characters inside an attributes value w/o escaping them... otherwise browsers/parsers think you're ending the attribute value declaration. – Aaron Aug 21 '10 at 07:09
30

example replacement code: `'mystring'.replace(/"/g, '"');` – Joshua Burns Mar 28 '13 at 22:53
3

in the previous comment there is an extra quote. The code that works is 'mystring'.replace(/'/g, '"'); – Agustin Lopez Jan 13 '14 at 15:35
I know this is an old question, but why not simply use encodeURIComponent() / decodeURIComponent() -- to my knowledge they do exactly what you want and have been around since Armstrong walked on the moon or thereabouts i.e. all browsers support it. – Adergaard Aug 11 '16 at 17:36
@Adergaard, nope. Those are for a _third_ escape scheme used by HTTP in URLs. `encodeURIComponent('"') == '%22'` (URI [includes](http://stackoverflow.com/a/1984225/673991) URL). – Bob Stein Sep 17 '16 at 02:13
@BobStein-VisiBone Well, in my usecase it works perfectly. I have data-attributes that need to contain user generated text and when using my suggestion it works like a charm from mandarine chinese to danish with all 14 excalmation points used. – Adergaard Sep 20 '16 at 07:32
@AgustinLopez I don't see an extra quote in Joshua Burns' answer - just a double quote instead of a single quote. – Sean the Bean Oct 25 '17 at 16:29

score 115 · Answer 2 · edited May 23 '17 at 12:10

115

" would work in this particular case, as suggested before me, because of the HTML context.

However, if you want your JavaScript code to be independently escaped for any context, you could opt for the native JavaScript encoding:
' becomes \x27
" becomes \x22

So your onclick would become:
DoEdit('Preliminary Assessment \x22Mini\x22');

This would work for example also when passing a JavaScript string as a parameter to another JavaScript method (alert() is an easy test method for this).

I am referring you to the duplicate Stack Overflow question, How do I escape a string inside JavaScript code inside an onClick handler?.

edited May 23 '17 at 12:10

Community

1
1

answered Sep 18 '12 at 08:58

tsemer

2,959
3
29
26

2

Thank you! Yours is the more correct answer because it is native JavaScript regardless of context. – scarver2 Jul 30 '13 at 05:51
2

This is the correct answer, although in an HTML context using `"` will, of course, work. – Oliver Mar 11 '14 at 12:05
Note that `"` is required in input values, i.e., `` will not work. – thdoan Mar 31 '18 at 06:26
@10basetom naturally, JavaScript escaping only works in a JavaScript context, like event handlers (`onclick="..."`). The value of a `value` attribute is not being processed within a JavaScript context, only within an HTML context. – tsemer Apr 11 '18 at 13:58
1

replacement code: `'mystring'.replace(/"/g, '\\x22').replace(/'/g, '\\x27')` – chickens May 01 '18 at 16:33

score 34 · Answer 3 · answered Jan 05 '10 at 05:27

34

<html>
    <body>
        <a href="#" onclick="DoEdit('Preliminary Assessment &quot;Mini&quot;'); return false;">edit</a>
    </body>
</html>

Should do the trick.

answered Jan 05 '10 at 05:27

kristian

22,731
8
50
78

score 28 · Answer 4 · edited May 04 '15 at 17:08

28

Folks, there is already the unescape function in JavaScript which does the unescaping for \":

<script type="text/javascript">
    var str="this is \"good\"";
    document.write(unescape(str))
</script>

edited May 04 '15 at 17:08

Peter Mortensen

30,738
21
105
131

answered Jul 25 '11 at 17:32

rohtakdev

956
1
13
16

3

A combination of "escape"/"unescape" did what I needed. Thanks. – Luis R. Jan 06 '12 at 04:53
11

escape/unescape are deprecated. although encodeURI does more than just quotes. http://gotochriswest.com/blog/2011/05/23/escape-unescape-deprecated/ – chug2k Nov 21 '12 at 02:15

score 14 · Answer 5 · answered May 31 '16 at 00:08

This is how I do it, basically str.replace(/[\""]/g, '\\"').

var display = document.getElementById('output');
var str = 'class="whatever-foo__input" id="node-key"';
display.innerHTML = str.replace(/[\""]/g, '\\"');

//will return class=\"whatever-foo__input\" id=\"node-key\"

<span id="output"></span>

score 13 · Answer 6 · edited May 04 '15 at 17:06

13

The problem is that HTML doesn't recognize the escape character. You could work around that by using the single quotes for the HTML attribute and the double quotes for the onclick.

<a href="#" onclick='DoEdit("Preliminary Assessment \"Mini\""); return false;'>edit</a>

edited May 04 '15 at 17:06

Peter Mortensen

30,738
21
105
131

answered Jan 05 '10 at 04:44

dl.

2,264
1
19
22

5

Yikes. I was wondering why I naturally resorted to using ' for the attribute in the past. I just never delved into it all that deeply. Thanks. – Matt Dawdy Jan 05 '10 at 05:15

score 2 · Answer 7 · edited Feb 28 '20 at 22:57

Please find in the below code which escapes the single quotes as part of the entered string using a regular expression. It validates if the user-entered string is comma-separated and at the same time it even escapes any single quote(s) entered as part of the string.

In order to escape single quotes, just enter a backward slash followed by a single quote like: \’ as part of the string. I used jQuery validator for this example, and you can use as per your convenience.

Valid String Examples:

'Hello'

'Hello', 'World'

'Hello','World'

'Hello','World',' '

'It\'s my world', 'Can\'t enjoy this without me.', 'Welcome, Guest'

HTML:

<tr>
    <td>
        <label class="control-label">
            String Field:
        </label>
        <div class="inner-addon right-addon">
            <input type="text" id="stringField"
                   name="stringField"
                   class="form-control"
                   autocomplete="off"
                   data-rule-required="true"
                   data-msg-required="Cannot be blank."
                   data-rule-commaSeparatedText="true"
                   data-msg-commaSeparatedText="Invalid comma separated value(s).">
        </div>
    </td>

JavaScript:

     /**
 *
 * @param {type} param1
 * @param {type} param2
 * @param {type} param3
 */
jQuery.validator.addMethod('commaSeparatedText', function(value, element) {

    if (value.length === 0) {
        return true;
    }
    var expression = new RegExp("^((')([^\'\\\\]*(?:\\\\.[^\'\\\\])*)[\\w\\s,\\.\\-_\\[\\]\\)\\(]+([^\'\\\\]*(?:\\\\.[^\'\\\\])*)('))(((,)|(,\\s))(')([^\'\\\\]*(?:\\\\.[^\'\\\\])*)[\\w\\s,\\.\\-_\\[\\]\\)\\(]+([^\'\\\\]*(?:\\\\.[^\'\\\\])*)('))*$");
    return expression.test(value);
}, 'Invalid comma separated string values.');

score 2 · Answer 8 · edited May 04 '15 at 17:09

2

If you're assembling the HTML in Java, you can use this nice utility class from Apache commons-lang to do all the escaping correctly:

org.apache.commons.lang.StringEscapeUtils
Escapes and unescapes Strings for Java, Java Script, HTML, XML, and SQL.

edited May 04 '15 at 17:09

Peter Mortensen

30,738
21
105
131

answered Jan 04 '12 at 11:22

iTake

4,082
3
33
26

I use org.apache.commons.lang3.StringEscapeUtils.escapeEcmaScript(text) to construct methodExpression in Java. Thanks. – Harun May 17 '17 at 04:23

score 1 · Answer 9 · edited May 04 '15 at 17:05

1

I have done a sample one using jQuery

var descr = 'test"inside"outside';
$(function(){
   $("#div1").append('<a href="#" onclick="DoEdit(descr);">Click Me</a>');       
});

function DoEdit(desc)
{
    alert ( desc );
}

And this works in Internet Explorer and Firefox.

edited May 04 '15 at 17:05

Peter Mortensen

30,738
21
105
131

answered Jan 05 '10 at 04:40

rahul

184,426
49
232
263

5

Of course it does, because you aren't putting it directly in the attribute. To use your method, I'd have to create an array of JS strings, then do an arbitrary number of $("#divxxx")... assignments. Less than optimal, but thanks for the suggestion. – Matt Dawdy Jan 05 '10 at 05:14

score 1 · Answer 10 · edited Feb 28 '20 at 22:50

You can copy those two functions (listed below), and use them to escape/unescape all quotes and special characters. You don't have to use jQuery or any other library for this.

function escape(s) {
    return ('' + s)
        .replace(/\\/g, '\\\\')
        .replace(/\t/g, '\\t')
        .replace(/\n/g, '\\n')
        .replace(/\u00A0/g, '\\u00A0')
        .replace(/&/g, '\\x26')
        .replace(/'/g, '\\x27')
        .replace(/"/g, '\\x22')
        .replace(/</g, '\\x3C')
        .replace(/>/g, '\\x3E');
}

function unescape(s) {
    s = ('' + s)
       .replace(/\\x3E/g, '>')
       .replace(/\\x3C/g, '<')
       .replace(/\\x22/g, '"')
       .replace(/\\x27/g, "'")
       .replace(/\\x26/g, '&')
       .replace(/\\u00A0/g, '\u00A0')
       .replace(/\\n/g, '\n')
       .replace(/\\t/g, '\t');

    return s.replace(/\\\\/g, '\\');
}

not working for me. it can't escape double quotes – CanCoder Apr 03 '21 at 22:40 — CanCoder, Apr 03 '21 at 22:40

score 0 · Answer 11 · edited May 04 '15 at 17:07

0

Escape whitespace as well. It sounds to me like Firefox is assuming three arguments instead of one.   is the non-breaking space character. Even if it's not the whole problem, it may still be a good idea.

edited May 04 '15 at 17:07

Peter Mortensen

30,738
21
105
131

answered Jan 05 '10 at 06:08

the Hampster

876
1
14
21

score 0 · Answer 12 · answered Mar 22 '17 at 14:50

You need to escape quotes with double backslashes.

This fails (produced by PHP's json_encode):

<script>
  var jsonString = '[{"key":"my \"value\" "}]';
  var parsedJson = JSON.parse(jsonString);
</script>

This works:

<script>
  var jsonString = '[{"key":"my \\"value\\" "}]';
  var parsedJson = JSON.parse(jsonString);
</script>

score -2 · Answer 13 · edited Feb 28 '20 at 22:53

-2

You can use the escape() and unescape() jQuery methods. Like below,

Use escape(str); to escape the string and recover again using unescape(str_esc);.

edited Feb 28 '20 at 22:53

Peter Mortensen

30,738
21
105
131

answered Apr 04 '19 at 16:33

Abhiram

1,459
14
23

1

Use of the `escape()` function is discouraged. Use `encodeURI()` or `encodeURIComponent()` instead. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape – dearsina Aug 25 '22 at 12:13

Escape quotes in JavaScript

13 Answers13

Linked

Related