How do I style this span?

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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\">"