CODEWITHSUNDEEP
javascripthtmlcss
FriedCock
FriedCock

Reputation: 21

How do I style this span?

var replacedString = element.innerHTML.replace(selectedString, "<span>" + selectedString + "</span>");

If I do "<span style="color: red">" then it will end up reading the quotes wrong and not work.

Upvotes: 0

Views: 401

Answers (5)

Bart
Bart

Reputation: 5203

You can use single quotes:

var replacedString = element.innerHTML.replace(selectedString,
    '<span style="color: red">' + (selectedString) + '</span>');

TLDR: In JavaScript you can always use both either 'single qotes' or "double quotes" for literal strings. Contrary to for instance C#, that only allows double, or SQL, which only allows single quotes. I actually often wondered why this was in the past. Webwork requires a lot of thought already, and this results in yet another choice you have to make... more ambiguity...

However one day I realized these two options DO allow you to pick 'the-other-one' when you have to type a string that contains either a single or double quote within it. That is because once you pick a quote opening character you have the use the same one to close. So "this does not work':).

For that reason you can just type "this doesn't work", and then the ' in don't suddenly is NOT a problem anymore. Equally, using 'I say: "go learn ecmascript 6!"' solves the issue with using double quotes inside a string. In my book think this is exactly the reason why they added this option in JavaScript.

In HTML attribute values can also be surrounded by either single or double quotes. However using double quotes is seen in the wild a lot more, and also happens to be advised in Google's HTML/CSS styleguide so therefore for your case I would pick single quotes for the outer string.

Get hip: Note that in the new JavaScript - Ecmascript6 - there is even a third option. You can now use these quotes: `` (called backticks):

`I say: "Don't use ES5 unless you have to"`

But the main advantage of backticks is that they specify a 'template string'. In a template string you can embed one or more variables in your string without manual +-ing. Instead you use ${..} syntax, which is a more readable and less error prone. Or, looking at the OP's question, you can now write this.

let replacedString = element.innerHTML.replace(selectedString,
    `<span style="color: red">${selectedString}</span>`);

ES6 is supported in some browsers already, most notably Chrome, though it's not quite fit for production just yet (unless you use a transpilation tool.

Upvotes: 0

John Slegers
John Slegers

Reputation: 47081

Four easy ways to put quotes inside a JavaScript string :

To produce a string with value <span style='color: red'> :

You could use double quotes on the outside and single ones on the inside :

"<span style='color: red'>"

You could use single quotes for both, and escape those on the inside :

'<span style=\'color: red\'>'

To produce a string with value <span style="color: red"> :

You could use single quotes on the outside and double ones on the inside :

<span style="color: red">'

You could use double quotes for both, and escape those on the inside :

"<span style=\"color: red\">"

Upvotes: 0

Nishant
Nishant

Reputation: 21914

You could also use String.raw. It uses backticks for specifying the literal.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw

Upvotes: 0

guysigner
guysigner

Reputation: 2922

Use ' or escape with \" to enable string inside string.

So you can write "<span style=\"color: red\">" or "<span style='color: red'>"

Here's JSFiddle.

Upvotes: 2

Curtis
Curtis

Reputation: 103348

Either escape the quotes or use single quotes:

"<span style='color: red'>"

Personally I prefer using a combination of double/single quotes as it's more readable.

Upvotes: 2

Related Questions