通过编码HTML禁用输入

Question

我有一个输入，我将其占据值并将其设置为文本

javaScript：

OverSkrift.innerHTML = document.getElementById("textOver").value;

html

<div class="input over">
       <a>Type</a>
       <input type="text" value="ZEUS" id="textOver" />
</div>

但是，当用户类型时，假设

<b>Hey</b>

它被输出，例如：嘿

那么我如何禁用这个呢？我可以用纯文本输出它，以便将其输出，例如： <b>Hey</b>

在写这篇文章时，我意识到我需要与堆栈溢出相同的东西，当您将东西放在后tick中时：``

Answer 1

它被输出，例如：嘿

[..]我可以用纯文本将其输出，以便它像以下方式一样输出。 <b>Hey</b>

无需在此特定用例中进行HTML编码。只需使用textContent即可倾倒文本，而不是innerHTML。

示例：

var input = document.getElementById('textOver'), 
  result = document.getElementById('result') 
;
input.addEventListener('input', show);
function show(e) {
  result.textContent = e.target.value;
}
result.textContent = input.value;

<div class="input over">
  <a>Type</a>
  <input type="text" value="<b>Hello</b>" id="textOver" />
</div>
<hr>
<p id="result"></p>

Answer 2

您只需要在分配给innerhtml之前查找/替换一些字符串，以确保将其呈现为文本而不是html代码，例如So：

function htmlEntities(str) {
    return String(str)
             .replace(/&/g, '&')   // & -> &
             .replace(/</g, '&lt;')    // < -> &lt;
             .replace(/>/g, '&gt;')    // > -> &gt;
             .replace(/"/g, '&quot;'); // " -> &quot;
}
OverSkrift.innerHTML = htmlEntities(document.getElementById("textOver").value);

摘要来源：CSS-Tricks

Answer 3

几乎没有特殊字符，这使您的字符串看起来像html元素。

当您想从用户那里获得一些输入并直接显示它时，请始终意识到这一点。

尝试这个，

    var value = document.getElementById("textOver").value;
    value = escapeHtml( value );
    OverSkrift.innerHTML = value;
    function escapeHtml(string) {
        return String(string).replace(/[&<>"'/]/g, function (s) {
            return entityMap[s];
        });
    }
    var entityMap = {
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        '"': '&quot;',
        "'": '&#39;',
        "/": '&#x2F;'
    };