Javascript: экранирование двойных кавычек в HTML

Как я могу предотвратить images[i].title ниже от взлома HTML, если он содержит двойные кавычки?

for ( i=0;i<=images.length-1;i++ ){
    gallery += '<img width="250" height="250" src="' +  images[i].src + '" title="' + images[i].title + '" />';
}
7
escaping html javascript

4 ответов

можно использовать заменить() метод, чтобы избежать двойных кавычек:

for (var i = 0; i < images.length; ++i) {
    gallery += '<img width="250" height="250" src="' + images[i].src
        + '" title="' + images[i].title.replace(/\"/g, '\"') + '" />';
}

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

for (var i = 0; i < images.length; ++i) {
    gallery += '<img width="250" height="250" src="' + images[i].src
        + '" title="' + images[i].title.replace(/\"/g, "'") + '" />';
}

или инвертировать типы цитат в разметке:

for (var i = 0; i < images.length; ++i) {
    gallery += "<img width='250' height='250' src='" + images[i].src
        + "' title='" + images[i].title + "' />";
}
6

поскольку ни у кого, по-моему, нет правильного ответа:

for ( i=0;i<=images.length-1;i++ ){
    gallery += '<img width="250" height="250" src="' +  images[i].src
               + '" title="' + images[i].title.replace(/\"/g,'&quot;') + '" />';
}

заменяет все кавычки, и вы в конечном итоге с двойными кавычками, и они представлены в формате html, который является допустимым.

13
var_name.replace(/\"/gi,'%22');

Это тот, который вы ищете. Даже если ваши цвета выглядят "выключенными" в Visual Studio.

\ экранирует следующую цитату. gi делает замену для всех случаев.

2

вы можете вызвать replace в строке заголовка:

for ( i=0;i<=images.length-1;i++ ){
    gallery += '<img width="250" height="250" src="' +  images[i].src + '" title="' + images[i].title.replace('"',"'") + '" />';
}
1