Как экранировать HTML в строке

Короткий ответ

Замените пять специальных символов их HTML-сущностями. Амперсанд заменяется первым, иначе он испортит остальные замены:

const escapeHtml = (text) =>
  text
    .replaceAll('&', '&')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
    .replaceAll("'", '&#39;');
 
console.log(escapeHtml('<b>Tom & Jerry</b>'));

Результат:

<b>Tom & Jerry</b>

На странице проще: textContent

Когда вставляете текст в элемент, используйте textContent. Браузер покажет его как есть и никогда не превратит в теги:

<p id="comment"></p>
<script>
  const userText = '<img src=x onerror=alert(1)>';
  document.getElementById('comment').textContent = userText;
</script>

Частая ошибка

Вставка текста пользователя через innerHTML без экранирования позволяет кому угодно запустить свой код на вашей странице:

// dangerous: the text becomes real HTML
element.innerHTML = userText;
 
// safe
element.textContent = userText;