Skip to main content

How to Escape Quotes in a String in JavaScript

When working with strings in JavaScript, you'll often need to include single (') or double (") quote characters within the string itself. Since these characters are also used to define the string's boundaries, you must "escape" them to tell the JavaScript engine to treat them as literal characters.

This guide will teach you the modern, standard methods for handling quotes within strings. You will learn the best practices for declaring string literals and for programmatically escaping quotes in a dynamic string.

Goal 1: Including Quotes in a String Literal​

This is the most common scenario: you are writing a string in your code and need it to contain a quote.

Method A: Alternating Quotes​

The simplest solution is to use a different type of quote for the string's outer boundary than the one you need to include inside it.

The solution:

  • If your string contains single quotes, wrap it in double quotes.
  • If your string contains double quotes, wrap it in single quotes.
// To include a single quote, wrap the string in double quotes.
const singleQuoteString = "It's a beautiful day.";
console.log(singleQuoteString); // Output: It's a beautiful day.

// To include double quotes, wrap the string in single quotes.
const doubleQuoteString = 'He said, "Hello, world!"';
console.log(doubleQuoteString); // Output: He said, "Hello, world!"

Template literals, which use backticks (`), are the most flexible way to define strings. They allow you to include both single and double quotes inside them without any escaping.

const myString = `It's a "beautiful" day.`;

console.log(myString); // Output: It's a "beautiful" day.
note

Because of their flexibility and other features (like multi-line strings and interpolation), template literals are the recommended best practice for defining strings in modern JavaScript.

Method C: Using the Backslash Escape Character​

The classic way to include a quote is to escape it with a backslash (\). This tells the JavaScript engine that the character immediately following the backslash should be treated as a literal character, not as a special syntax character.

Example of escaping a single quote inside a single-quoted string:

const singleQuoteString = 'It\'s a beautiful day.';
console.log(singleQuoteString); // Output: It's a beautiful day.

Example of escaping a double quote inside a double-quoted string:

const doubleQuoteString = "He said, \"Hello, world!\"";
console.log(doubleQuoteString); // Output: He said, "Hello, world!"
note

While this works, it can make strings harder to read. The alternating quotes or template literal methods are generally preferred for clarity.

Goal 2: Programmatically Escaping Quotes in a Variable​

Sometimes you have a string in a variable, and you need to prepare it to be safely embedded in another context, such as inside a JSON string or an HTML attribute. This requires programmatically adding backslashes.

For example, we have a string that we want to escape for use in another system.

// Problem: How to convert "It's a string" to "It\'s a string"?
const myString = "It's a string";

The Solution is to use String.prototype.replaceAll(): the replaceAll() method is the perfect tool for this. It finds all occurrences of a substring and replaces them.

Example of escaping all double quotes:

const myString = `A string with "double" and 'single' quotes.`;
const escapedDouble = myString.replaceAll('"', '\\"');
console.log(escapedDouble); // Output: A string with \"double\" and 'single' quotes.

Example of escaping all single quotes:

const myString = `A string with "double" and 'single' quotes.`;
const escapedSingle = myString.replaceAll("'", "\\'");
console.log(escapedSingle); // Output: A string with "double" and \'single\' quotes.
note

To create a literal backslash in the replacement string, you must escape the backslash itself ('\\"').

Conclusion​

Handling quotes in JavaScript is simple if you choose the right method for the context.

  • When defining a string literal, the best and most readable approach is to use template literals (backticks `). They handle both single and double quotes without needing any escaping.
  • When you need to programmatically escape a string that is already in a variable, use the replaceAll() method to replace all instances of a quote with its escaped version.

Table of Contents