How do I pass a string within a string within a string? [duplicate]

Question

I have a javascript playAudio() function which expects a string parameter. I can't seem to figure out how to pass a string value as a parameter for this function without breaking out of the string.

htmlString = "<button class='button-icon' value='PLAY' onclick='playAudio()'></button>";

I want to pass the string "SP00005" as a parameter. However I am unable to use inverted commas or apostrophes as these have already been used for the more outer part of my htmlString.

I even tried breaking up formation of htmlString into various steps as illustrated below:

htmlString = "";
htmlString += "<button class='button-icon' value='PLAY' onclick='playAudio(";
htmlString += "SP00005";
htmlString += ")'></button>";

So my question to you is: how do I pass a string within a string which itself is in a string?

htmlString = "<button class='button-icon' value='PLAY' onclick='playAudio(\"more strings \")'></button>"; — Vladimir M
– Vladimir M, Commented Nov 25, 2016 at 23:25

baao · Accepted Answer · 2016-11-25 23:27:07Z

2

One way would be to escape the ".

htmlString = "<button class='button-icon' value='PLAY' onclick='playAudio(\"foo\")'></button>";

The better option is to select the button with javascript, add an eventListener and don't bother about inline js

<button id="fooBtn" class='button-icon' value='PLAY'></button>

js:

document.getElementById('fooBtn').addEventListener('click', function() {
    playAudio("SP00005");
});

answered Nov 25, 2016 at 23:27

baao

73.5k18 gold badges152 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rvelbon Over a year ago

Thanks so much! Escaping did the trick! An event listener wasn't suitable because the page is dynamic and adds different buttons according to the content loaded by the database. Thanks a lot!!

lastWhisper · Accepted Answer · 2016-11-25 23:25:55Z

0

You can escape " with \"'

Example test = "Hello, I am \"Steve\""

which resolves to: Hello, I am "Steve"

answered Nov 25, 2016 at 23:25

lastWhisper

4773 silver badges6 bronze badges

Comments

bruno · Accepted Answer · 2016-11-25 23:26:26Z

0

You will need to do this way, using \" inside playAudio():

htmlString = "";
htmlString += "<button class='button-icon' value='PLAY' onclick='playAudio(\"";
htmlString += "SP00005";
htmlString += "\")'></button>";

answered Nov 25, 2016 at 23:26

bruno

1519 bronze badges

Comments

Niles Tanner · Accepted Answer · 2016-11-25 23:30:41Z

0

You can also use back ticks. This will allow you to build the string however you want without escape characters

var string = `<button class='button-icon' value='PLAY' onclick='playAudio('SP00005')'></button>`;

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

answered Nov 25, 2016 at 23:30

Niles Tanner

4,0512 gold badges19 silver badges33 bronze badges

3 Comments

baao Over a year ago

Starting with es6, no IE support, but a good way of doing this nowadays

Niles Tanner Over a year ago

Thanks for that caveat baao !

baao Over a year ago

I hate to say it, I'm using template strings all the time.. But everything new breaks IE... :)

Collectives™ on Stack Overflow

How do I pass a string within a string within a string? [duplicate]

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

3 Comments

Linked

Related