Javascript в HTML - Использование одинарной кавычки внутри другой одинарной кавычки

Question

document.getElementById("img").innerHTML="< img src='/sitepath/"+imgg+".jpg' width='72' height='44' onclick='alert('hello');' />";

Приведенный выше код - мой javascript. Проблема в том, чтобы напечатать привет или любую другую строку. Если я просто наберу 123 вместо приветствия, он выдаст предупреждение. Но я не могу использовать строку, как привет. Обычно строка в функции оповещения хранится в кавычках '', но весь контент находится в двойных кавычках, и я уже использовал одинарные кавычки в начале функции onclick. Я пытался использовать Escape-символ ("\"), но это не помогло. Есть предложения?

Answer 1

Попробуйте это:

document.getElementById("img").innerHTML = '<img src="/sitepath/' + imgg + '.jpg" width="72" height="44" onclick="alert(\'hello\');" />';

Answer 2

Если вы используете апострофы в качестве разделителя для атрибутов HTML, вы должны кодировать HTML апострофами, которые вы помещаете в атрибут:

document.getElementById("img").innerHTML="< img src='/sitepath/"+imgg+".jpg' width='72' height='44' onclick='alert(&#39;hello&#39;);' />";

Я предпочитаю использовать апострофы в качестве разделителей строк в Javascript и кавычки в качестве разделителей для атрибутов HTML. Тогда вы просто избегаете апострофов, которые у вас есть внутри строки Javascript:

document.getElementById("img").innerHTML='< img src="/sitepath/'+imgg+'.jpg" width="72" height="44" onclick="alert(\'hello\');" />';

Чтобы поместить любую строку в Javascript, в атрибут HTML, внутри строки в Javascript, вы делаете:

• экранировать все разделители строк в строке
• HTML кодирует код Javascript
• экранировать все разделители строк в строке HTML

Answer 3

У вас есть JavaScript внутри HTML внутри JavaScript. Это естественно сбивает с толку. Лучше избегать проблем с цитированием строк и экранированием (которые, будучи ошибочными, могут легко привести к дырам в безопасности при использовании данных, предоставленных пользователем), и делать это способом DOM:

var img= new Image();
img.src= '/sitepath/'+imgg+'.jpg';
img.width= 72;
img.height= 44;
img.onclick= function() {
    alert('hello');
};
document.getElementById('img').appendChild(img);

Answer 4

Я пытался использовать Escape-символ ("\"), но это не помогло

Javascript отличается от C #, вы просто используете его два раза за раз, например: alert('We are\\'t going to go')

Answer 5

что делать, если кому-то нужно отправить переменную вместо строки "привет"? Примерно так:

function showContent(toPopulate) { 
      document.getElementById(toPopulate).innerHTML = "<a href='javascript:showOtherContent(*toPopulate*);'>show</a>"
}

function showOtherContent(toPopulate) {...}

так как отправить toPopulate в качестве переменной для showOtherContent ()?

Вышеуказанное решается так:

document.getElementById(toPopulate).innerHTML = "<a href='javascript:showOtherContent(\"" + toPopulate + "\");'>show</a>"

Answer 6

Неважно, если ваши внешние кавычки одинарные или двойные. Вы можете экранировать символ во внешней строке с обратной косой чертой ... \ 'становится "внутри самой строки. Пример Дарина или Масуда подойдет. Но Масуд не знает о необходимости использовать двойные кавычки в качестве внешнего вложения.

Answer 7

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

document.getElementById("img").innerHTML="<img src='/sitepath/"+imgg+".jpg' width='72' height='44' onclick=\"alert('hello');\" />";