Ошибка форматирования при добавлении тега привязки html к строке

Question

Я имею дело со странной ошибкой форматирования, которую я не могу понять. С помощью некоторых других у меня есть небольшая функция, которая заменяет все @ [user] в строке ссылкой на фактического пользователя Twitter. Он работает довольно хорошо, но как только я добавляю его на свою веб-страницу, он начинает немного волноваться.

Вот пример строки.

If you want these foams Ima give you the chrome <a href="https://twitter.com/WillThaRapper" target="_blank">@WillThaRapper</a>

Однако, как только я добавляю его к элементу <p> для отображения на странице, он выглядит следующим образом.

If you want these foams Ima give you the chrome <a href="https://twitter.com/WillThaRapper" target="_blank">@WillThaRapper</a>

У меня много проблем с выяснением этого.

Answer 1

Кажется, проблема в том, что вы добавляете строку HTML-сущностей в ваш HTML. Чтобы добавить фактический HTML, вы можете использовать DOMParser для преобразования сущностей в HTML, которые могут отображаться в DOM:

const decodeEntities = str => {
  const doc = new DOMParser().parseFromString(str, "text/html");
  return doc.documentElement.textContent;
}

// input = the text you want to append to the page
const input = "If you want these foams Ima give you the chrome <a href="https://twitter.com/WillThaRapper" target="_blank">@WillThaRapper</a&gt";

document.getElementById("output").innerHTML += decodeEntities(input);

<p id="output"></p>