IE innerHTML прерывает предложение, если последнее слово содержит '&' (амперсанд)

Question

Я пытаюсь заполнить элемент DOM идентификатором «myElement». Содержимое, которое я заполняю, представляет собой смесь текста и элементов HTML.

Предположим, что следующим является содержимое, которое я хочу заполнить в моем элементе DOM.

var x = "<b>Success</b> is a matter of hard work &luck";

Я попытался использовать innerHTML следующим образом,

document.getElementById("myElement").innerHTML=x;

Это привело к отрыванию последнего слова в моем предложении. По-видимому, проблема связана с символом «&», присутствующим в последнем слове. Я поиграл с '&' и innerHTML, и вот мои наблюдения.

1. Если последнее слово содержимого содержит менее 10 символов и если в нем присутствует символ «&», innerHTML обрезает предложение в «&».
2. Эта проблема не возникает в Firefox.
3. Если я использую innerText, последнее слово в такте, но тогда все теги HTML, которые являются частью содержимого, становятся простым текстом.

Я попытался заполнить с помощью метода #html в jQuery,

 $("#myElement").html(x);

Этот подход решает проблему в IE, но не в chrome .

Как я могу вставить контент HTML с последним словом, содержащим '&', без обрезки во всех браузерах?

Обновление : 1. Я попробовал html-кодирование содержимого, которое я пытаюсь вставить в DOM. Когда я кодирую содержимое, HTML-теги, которые являются частью содержимого, становятся простой строкой.

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

Успех - это вопрос тяжелой работы и удачи

но когда я кодирую то, что я на самом деле получаю на отображаемой странице,

<b>Success</b> is a matter of hard work &luck

Answer 1

Вам следует заменить & на &.

Символ & (амперсанд) используется в HTML для представления различных специальных символов. Например, " = ", &lt; = <, и так далее . Теперь &luck явно не является допустимой сущностью HTML (для одной из них пропущена точка с запятой). Однако различные браузеры могут из-за комбинаций исправления ошибок (точка с запятой) и того факта, что выглядит в некотором роде как объект HTML (&, за которым следуют четыре символа), пытается проанализировать его как таковой.

Поскольку &luck; не является допустимым объектом HTML, исходный текст теряется. Из-за этого при использовании амперсанда в вашем HTML всегда используйте &.

Обновление : Когда этот текст вводится пользователем, вы должны правильно экранировать этот символ. Например, в PHP вы должны вызвать текст htmlentities перед его отображением для пользователя. Это дает дополнительное преимущество фильтрации вредоносного кода пользователя, такого как теги <script>.

Answer 2

Амперсанд - это специальный символ в HTML , который указывает начало ссылки на символьную сущность или числовую ссылку на символ , вам нужно экранировать его следующим образом:

var x = "<b>Success</b> is a matter of hard work &amp;luck";

Answer 3

Попробуйте использовать это вместо:

var x = "<b>Success</b> is a matter of hard work &amp;luck";

Используя HTML-кодировку амперсанда, вы гарантируете отсутствие двусмысленности в том, что вы имеете в виду, когда пишете «& luck».