Escaping in JavaScript

Question

How do I make this work? <a href='javascript:func("Jack'S Birthday")'>Jack's Birthday</a>

Any reason you need to abuse `href` for JavaScript code? – Sebastian Simon Mar 17 '18 at 17:51 — Sebastian Simon, Mar 17 '18 at 17:51

Abhijit Kar ツ · Accepted Answer · 2018-03-17T18:59:25.720

1

Do as follows:

// How about using variables instead?
var emily = "Emily'S Birthday"
var birthdays = {
  john: "John'S Birthday"
}

function func(val) {
  console.log(val);
}

<!DOCTYPE html>
<html>

<body>
  <a href='javascript:func("Jack&apos;S Birthday")'>Jack's Birthday</a>
  <br>
  <a href="javascript:func('Norman\'S Birthday')">Norman's Birthday</a>
  <br>
  <a href="javascript:func(emily)">Emily's Birthday</a>
  <br>
  <a href="javascript:func(birthdays.john)">John's Birthday</a>
</body>

</html>

Explanation:

Keep single quotes within double quotes when you escape using backslash \
Use double quotes within single quotes when you use $apos;
Best of all, use variables, they ease a lot of pain -

a. You don't have to go into html to modify values,
b. these can be declared at one place, or a single file,
c. They can be fetched from back-end
d. Best yet, no need to deal with quotes!

edited Mar 17 '18 at 18:59

answered Mar 17 '18 at 18:11

Abhijit Kar ツ

1,732
1
11
24

Thanks. But none of the above actually shows Norman'S Birthday. It does say Norman\'S Birthday with a "\". – jforex78 Mar 17 '18 at 18:36
@jforex78 But I see the result without the back slash! – Abhijit Kar ツ Mar 17 '18 at 18:38
i see - i'll try this and mark the answer thereafter. thank you. – jforex78 Mar 17 '18 at 19:17
Thanks - this works in JavaScript. I've edited my question to show the production problem we are having with FTL expansion. – jforex78 Mar 18 '18 at 22:54

score 1 · Answer 2 · answered Mar 17 '18 at 18:15

Apparently you can't escape characters within HTML attributes. The proper way to go would be to use HTML entities like ' :

<a href='javascript:console.log("&apos;")'>click me</a>

See How to properly escape quotes inside html attributes?.

score 0 · Answer 3 · answered Mar 17 '18 at 17:59

0

If possible, do it this way

<html>
  <header>
    <script>
    function func(x) {
      alert(x);
    }</script>
  </header>
  <body>
    <a href="javascript:func('Norman\'S Birthday')">Birthday</a>
  </body>
</html>

answered Mar 17 '18 at 17:59

D. Seah

4,472
1
12
20

If possible, an actual button should be used, and `addEventListener`. – Sebastian Simon Mar 17 '18 at 18:10

score 0 · Answer 4 · answered Mar 17 '18 at 18:07

0

Convert to NCR. This should work.

<html>
    <a href='javascript:func("Norman&#39;S Birthday")'>Birthday</a>
</html>

Or.

<html>
    <a href='javascript:func("Norman&#x27;S Birthday")'>Birthday</a>
</html>

answered Mar 17 '18 at 18:07

Valerii Strilets

164
8

Escaping in JavaScript

4 Answers4