无需服务端语言，禁用输入框与文本域HTML并允许特定标签的方法

这个问题我之前做项目时也碰到过，本质原因是你用了innerHTML来渲染输入内容——浏览器会把inputBox.value里的内容当作HTML代码去解析，所以输入<b>加粗</b>就会变成真的加粗文本，而不是显示这段标签代码。下面给你两种针对性的解决方案，按需选择：

方案1：完全禁用HTML（原样显示所有输入内容） #

最简单的办法就是不用innerHTML，改用textContent或者innerText，这两个属性会把内容当作纯文本处理，不会解析任何HTML标签：

var inputBox = document.getElementById('QueryTitle');
inputBox.onkeyup = function(){
  // 把innerHTML换成textContent
  document.getElementById('QueryTitleOutput').textContent = inputBox.value;
}

var textarea = document.getElementById('QueryInput');
textarea.onkeyup = function(){
  document.getElementById('QueryInputOutput').textContent = textarea.value;
}

如果你还是想用innerHTML（比如有其他样式需求），可以手动把HTML特殊字符转成实体字符，写个简单的转义函数：

function escapeHtml(str) {
  return str.replace(/[&<>"']/g, function(match) {
    const escapeChars = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };
    return escapeChars[match];
  });
}

// 调用方式
inputBox.onkeyup = function(){
  document.getElementById('QueryTitleOutput').innerHTML = escapeHtml(inputBox.value);
}

这样输入<script>alert('x')</script>也会原样显示，不会执行脚本，还能提升安全性。

方案2：只允许特定HTML标签（白名单过滤） #

如果想让用户能用一些简单的格式标签（比如<b>、<i>、<u>），但禁止其他危险标签（比如<script>、<iframe>），可以做个白名单过滤。这里用DOMParser来处理，比正则更可靠：

function sanitizeHtml(str, allowedTags = ['b', 'i', 'u', 'em', 'strong']) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(str, 'text/html');
  const elements = doc.body.querySelectorAll('*');
  
  elements.forEach(el => {
    if (!allowedTags.includes(el.tagName.toLowerCase())) {
      // 把不允许的标签替换成它的文本内容
      el.replaceWith(el.textContent);
    }
  });
  
  return doc.body.innerHTML;
}

// 调用方式
inputBox.onkeyup = function(){
  document.getElementById('QueryTitleOutput').innerHTML = sanitizeHtml(inputBox.value);
}

这个函数会把不在白名单里的标签全部移除，只保留允许的标签和文本内容。比如输入<b>加粗</b><script>alert(1)</script>，最终只会渲染出加粗的“加粗”，脚本标签会被过滤掉。

内容的提问来源于stack exchange，提问作者user9457114