Как экранировать кавычки js

Экранирование, специальные символы

Как мы уже видели, обратная косая черта \ используется для обозначения классов символов, например \d . Это специальный символ в регулярных выражениях (как и в обычных строках).

Есть и другие специальные символы, которые имеют особое значение в регулярном выражении. Они используются для более сложных поисковых конструкций. Вот полный перечень этих символов: [ ] \ ^ $ . | ? * + ( ) .

Не надо пытаться запомнить этот список: мы разберёмся с каждым из них по отдельности, и таким образом вы выучите их «автоматически».

Экранирование символов

Допустим, мы хотим найти буквально точку. Не «любой символ», а именно точку.

Чтобы использовать специальный символ как обычный, добавьте к нему обратную косую черту: \. .

Это называется «экранирование символа».

alert( "Глава 5.1".match(/\d\.\d/) ); // 5.1 (совпадение!) alert( "Глава 511".match(/\d\.\d/) ); // null ("\." - ищет обычную точку)

Круглые скобки также являются специальными символами, поэтому, если нам нужно использовать именно их, нужно указать \( . В приведённом ниже примере ищется строка «g()» :

alert( "function g()".match(/g\(\)/) ); // "g()"

Если мы ищем обратную косую черту \ , это специальный символ как в обычных строках, так и в регулярных выражениях, поэтому мы должны удвоить её.

alert( "1\\2".match(/\\/) ); // '\'

Косая черта

Символ косой черты ‘/’ , так называемый «слэш», не является специальным символом, но в JavaScript он используется для открытия и закрытия регулярного выражения: /. шаблон. / , поэтому мы должны экранировать его.

Вот как выглядит поиск самой косой черты ‘/’ :

alert( "/".match(/\//) ); // '/'

С другой стороны, если мы не используем короткую запись /. / , а создаём регулярное выражение, используя new RegExp , тогда нам не нужно экранировать косую черту:

alert( "/".match(new RegExp("/")) ); // находит /

new RegExp

Если мы создаём регулярное выражение с помощью new RegExp , то нам не нужно учитывать / , но нужно другое экранирование.

Например, такой поиск не работает:

let regexp = new RegExp("\d\.\d"); alert( "Глава 5.1".match(regexp) ); // null

Аналогичный поиск в примере выше с /\d\.\d/ вполне работал, почему же не работает new RegExp(«\d\.\d») ?

Причина в том, что символы обратной косой черты «съедаются» строкой. Как вы помните, обычные строки имеют свои специальные символы, такие как \n , и для экранирования используется обратная косая черта.

Вот как воспринимается строка «\d.\d»:

alert("\d\.\d"); // d.d

Строковые кавычки «съедают» символы обратной косой черты для себя, например:

• \n – становится символом перевода строки,
• \u1234 – становится символом Юникода с указанным номером,
• …А когда нет особого значения: как например для \d или \z , обратная косая черта просто удаляется.

Таким образом, new RegExp получает строку без обратной косой черты. Вот почему поиск не работает!

Чтобы исправить это, нам нужно удвоить обратную косую черту, потому что строковые кавычки превращают \\ в \ :

let regStr = "\\d\\.\\d"; alert(regStr); // \d\.\d (теперь правильно) let regexp = new RegExp(regStr); alert( "Глава 5.1".match(regexp) ); // 5.1

Итого

• Для поиска специальных символов [ ] \ ^ $ . | ? * + ( ) , нам нужно добавить перед ними \ («экранировать их»).
• Нам также нужно экранировать / , если мы используем /. / (но не new RegExp ).
• При передаче строки в new RegExp нужно удваивать обратную косую черту: \\ для экранирования специальных символов, потому что строковые кавычки «съедят» одну черту.

Как экранировать кавычки js

Чтобы экранировать кавычки, в JS существует несколько спосбов.

Вы можете обернуть строку в другой вид кавычек. Например если вы хотите вывести одинарную кавычку ‘ , то строку можно обернуть в двойные кавычки:

 Текст без кавычек, 'текст в кавычках' 

И наоборот, если вы хотите вывести двойные кавычки, то их можно обернуть в одинарные:

 Текст без кавычек, "текст в кавычках" 

Другой способ — это использовать символ обратной косой черты(обратный слэш) \ перед кавычками:

 Текст без кавычек, 'текст в кавычках' // тоже самое с двойными кавычками: const result2 = "Текст без кавычек, \"текст в кавычках\""; console.log(result2); // => Текст без кавычек, "текст в кавычках" 

JavaScript: Кавычки

С первыми двумя все понятно, это точно строки, мы уже работали с подобными конструкциями и говорили, что строки — это наборы символов.

Любой одиночный символ в кавычках — это строка. Пустая строка » — это тоже строка. То есть строкой мы считаем всё, что находится внутри кавычек, даже если это пробел, один символ или вообще отсутствие символов.

Ранее в уроках мы записывали строки в одинарных кавычках, но это не единственный способ. Можно использовать и двойные:

// Стандарт кодирования airbnb, рекомендует // использовать, по возможности, одинарные console.log("Dracarys!"); 

Представьте, что вы хотите напечатать строчку Dragon’s mother. Апостроф перед буквой s — это такой же символ, как одинарная кавычка. Попробуем:

console.log('Dragon's mother'); // Uncaught SyntaxError: missing ) after argument list 

Такая программа не будет работать. С точки зрения JavaScript, строка началась с одинарной кавычки, а потом закончилась после буквы n. Дальше были символы s mother без кавычек — значит, это не строка. А потом была одна открывающая строку кавычка, которая так и не закрылась: ‘); . Этот код синтаксически некорректен (это видно даже по тому, как подсвечен код).

Здесь нам помогут двойные кавычки. Такой вариант программы отработает корректно:

console.log("Dragon's mother"); 

Теперь интерпретатор знает, что строка началась с двойной кавычки — значит, и закончиться должна на двойной кавычке. А одинарная кавычка внутри стала частью строки.

Верно и обратное. Если внутри строки мы хотим использовать двойные кавычки, то саму строку надо делать в одинарных. Причем количество кавычек внутри самой строки не важно.

А что, если мы хотим создать такую строку:

Dragon's mother said "No" 

В ней есть и одинарные и двойные кавычки. Как быть в этой ситуации? Нужно каким-то образом сказать интерпретатору считать каждую кавычку частью строки, а не началом или концом строки.

Для этого экранируют специальные символы. В нашем случае тот символ, который является признаком конца и начала строки, это либо одинарная кавычка, либо двойная, в зависимости от ситуации. Для экранирования используется обратный слеш \ .

// Экранируется только ", так как в этой ситуации // двойные кавычки имеют специальное значение console.log("Dragon's mother said \"No\""); // => Dragon's mother said "No" 

Посмотрите внимательно: нам нужно было добавить \ для двойных кавычек, но не для одинарной (апостроф), потому что сама строка создана с двойными кавычками. Если бы строка создавалась с одинарными кавычками, то символ экранирования нужен был бы перед апострофом, но не перед двойными кавычками.

// \ не выводится, если после него идет обычный, // а не специальный символ console.log("Death is \so terribly final"); // => Death is so terribly final 

А что, если нужно вывести сам обратный слеш? Точно так же, как и любой другой специальный символ, его надо экранировать самим собой.

console.log("\\"); // => \ 

Вопрос на самопроверку, что выведет этот код?

console.log("\\ \\ \\\\ \\\ \'\""); 

Ответ Этот код выведет такую строку: `\ \ \\ \ ‘»`.

Задание

Напишите программу, которая выведет на экран:

"Khal Drogo's favorite word is "athjahakar"" 

Программа должна в точности вывести на экран именно эту фразу. Обратите внимание на кавычки в начале и в конце фразы:

"Khal Drogo's favorite word is "athjahakar""

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

• Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Полезное

Как экранировать кавычки js

Создайте регулярное выражение для поиска строк в двойных кавычках «. » .

Важно, что строки должны поддерживать экранирование с помощью обратного слеша, по аналогии со строками JavaScript. Например, кавычки могут быть вставлены как \» , новая строка как \n , а сам обратный слеш как \\ .

let str = "Как вот \"здесь\".";

В частности, обратите внимание: двойная кавычка после обратного слеша \» не оканчивает строку.

Поэтому мы должны искать от одной кавычки до другой, игнорируя встречающиеся экранированные кавычки.

В этом и состоит основная сложность задачи, которая без этого условия была бы элементарной.

Примеры подходящих строк:

.. "test me" .. .. "Скажи \"Привет\"!" . (строка с экранированными кавычками) .. "\\" .. (внутри двойной слеш) .. "\\ \"" .. (внутри двойной слеш и экранированная кавычка)

В JavaScript приходится удваивать обратные слеши, чтобы добавлять их в строку, как здесь:

let str = ' .. "test me" .. "Скажи \\"Привет\\"!" .. "\\\\ \\"" .. '; // эта строка в памяти: alert(str); // .. "test me" .. "Скажи \"Привет\"!" .. "\\ \"" ..

• Сначала ищем открывающую кавычку «
• Затем, если есть обратный слеш \\ (удвоение обратного слеша – техническое, потому что это спец.символ, на самом деле там один обратный слеш), то после него также подойдёт любой символ (точка).
• Иначе берём любой символ, кроме кавычек (которые будут означать конец строки) и обратного слеша (чтобы предотвратить одинокие обратные слеши, сам по себе единственный обратный слеш не нужен, он должен экранировать какой-то символ) [^»\\]
• …И так далее, до закрывающей кавычки.

let regexp = /"(\\.|[^"\\])*"/g; let str = ' .. "test me" .. "Скажи \\"Привет\\"!" .. "\\\\ \\"" .. '; alert( str.match(regexp) ); // "test me","Скажи \"Привет\"!","\\ \""