Двойные вложенные цитаты - PullRequest
       55

Двойные вложенные цитаты

0 голосов
/ 26 сентября 2018

У меня есть эта строка кода

formsParent.innerHTML = "<p style = 'color: black; font-family: "Times New Roman" font-size: 2em'> Order submitted. Thank you for ordering! </p>"

Первая цитата относится к свойству innerHTML.Далее идут свойства внутри атрибута style элемента <p>, и, наконец, мне нужна еще одна кавычка внутри для свойства font-family со значением, состоящим из нескольких слов, поэтому для него также нужны кавычки.Есть только "" и '' , и использование двойных кавычек для семейства шрифтов приводит к ошибке.Как использовать кавычки внутри кавычек внутри кавычек?

РЕДАКТИРОВАТЬ: Это НЕ дубликат Двойная кавычка в строке JavaScript .Прекратите помечать это!

В приведенном выше вопросе OP запрашивает односоставные кавычки - одинарные кавычки или двойные кавычки были ответом или наоборот.

В моем вопросе я прошу двойные кавычки - [цитаты] внутри [цитаты] внутри [цитаты].Мой вопрос - это дополнительный слой цитат.

Ответы [ 3 ]

0 голосов
/ 26 сентября 2018

Использовать шаблон литерал

document.getElementById('formsParent').innerHTML = `<p style = 'color: red; font-family: "Times New Roman" font-size: 2em'> Order submitted. Thank you for ordering! </p>`
<div id="formsParent">
0 голосов
/ 26 сентября 2018

В вашем случае вам нужно экранировать quotes:

formsParent.innerHTML = "<p style='color: black; font-family: \"Times New Roman\"; font-size: 2em'> Order submitted. Thank you for ordering! </p>";

Но в таких случаях лучше использовать backtick, чтобы содержать значение innerHTML, таким образом вы 'Никогда не нужно убегать ни apostrophes, ни quotes:

formsParent.innerHTML = `<p style='color: black; font-family: "Times New Roman"; font-size: 2em'> Order submitted. Thank you for ordering! </p>`;
0 голосов
/ 26 сентября 2018

Лучшим вариантом здесь будет экранирование кавычек:

formsParent.innerHTML = "<p style=\"color: black; font-family: 'Times New Roman' font-size: 2em\"> Order submitted. Thank you for ordering!</p>";
...