How to use JavaScript to escape quotes in strings

Escape quotes in strings in JavaScript

To escape single or double quotes in a string, you need to use a backslash \ character before each single or double quote in the string content, such as ‘that’s it’.

const escapeSingle = 'it\'s a string';
(escapeSingle) // 👉️ it's a string

const escapeDouble = "fql\"zadmei"
(escapeDouble)  // 👉️ fql"zadmei

When we escape single or double quotes with backslash characters, we indicate JavaScript that we want to treat quotes as literal single or double quote characters, rather than string ending characters. If single quotes are used in strings enclosed with single quotes, the string will be terminated prematurely.

However, this is not the case when we escape single quotes using backslashes.

Escape double quotes in string

We can use the same method to escape double quotes in a string.

const escapeDouble = "He said: \"test 123\""
(escapeDouble) // 👉️ He said: "test 123"

We use the backslash \ character to escape each double quote in the string.

Use () to escape quotes in strings

We can also use()Method escapes quotes in strings.

// ✅ Escape each single quoteconst str = "it's a string";
(str); // 👉️ it's a string
const result = ("'", "\\'");
(result); // 👉️ it\'s a string

()The method returns a new string where all matching patterns are replaced by the provided replacement.

This method takes the following parameters:

• patternThe pattern to look for in the string. Can be a string or a regular expression.
• replacementA string that replaces the matching substring with the provided pattern.

The code example escapes each single quote in the string.

// ✅ Escape each single quoteconst str = "it's a string";
(str); // 👉️ it's a string
const result = ("'", "\\'");
(result); // 👉️ it\'s a string

The same method can be used to escape double quotes in a string.

// ✅ Escape every double quoteconst str = 'it"s a string';
(str); // 👉️ it"s a string
const result = ('"', '\\"');
(result); // 👉️ it\"s a string

()The method returns a new string where the pattern match is replaced. This method does not change the original string.

Strings are immutable in JavaScript.

Alternate quotes to avoid backslashes

Escape quotes can be avoided by changing the external quotes of a string.

const withSingle = "it's a string";
(withSingle) // 👉️ it's a string
const withDouble = 'He said: "test 123"'
(withDouble) // 👉️ He said: "test 123"

We use double and single quotes alternately, so we don't have to escape them.

Use backticks instead of backslash

Please note, We can also use backticks when defining variables that store strings. This allows us to use both single and double quotes in strings without escaping them.

const withBoth = `it's a "test 123"`;
(withBoth) // 👉️ it's a "test 123"

The string is enclosed in backquotes, so we don't have to escape single and double quotes in its contents.

To add the backslash \ character to a string, add the two backslashes side by side.

The first backslash escapes the second backslash, so the second backslash is literally meaningful.

const addBackslash = "He said: \\\"test 123\\\""
(addBackslash) // 👉️ He said: \"test 123\"

We have 3 adjacent backslashes. The first backslash escapes the second backslash, so it is interpreted literally by JavaScript. The third backslash is used to escape double quotes.

This is a more realistic example, we only add a backslash to the string.

const addBackslash = "BMW \\1996\\"
(addBackslash) // 👉️ BMW \1996\

Show escaped characters in string

If you need to display escape characters in a string, please use()method.

const addBackslash = 'BMW \\1996\\';
(addBackslash); // 👉️ BMW \1996\
const withEscapeChars = (addBackslash);
(withEscapeChars); // 👉️ "BMW \\1996\\"

Method converts JavaScript values ​​to JSON strings.

When converting a value to a JSON string, its output contains escaped characters.

Avoid using inline event handlers in HTML code

If you get an error when using an inline event handler in HTML code, the best solution is to rewrite the code to use JavaScript instead of using an inline event handler.

Here is an example.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div ></div>
    <script type="module" src=""></script>
  </body>
</html>

This is the relevant JavaScript code.

const box = ('box');
function handleClick() {
   = 'lime';
}
('click', handleClick);
 = `
  <div >
    <p title="example"></p>
    <p>Hello world</p>
  </div>
`;

We can use()Method orquerySelectorMethod selects the DOM element.

We can then add an event listener to the element or update its internal HTML tag.

Please note, We used backticks when setting the innerHTML property.

This allows us to use both single and double quotes when building HTML tags.

This is the article about how to use JavaScript to escape quotation marks in strings. For more related js escape string content, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!