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>

写这篇文章的时候，我意识到当你把东西放在后面时，我需要的东西与堆栈溢出一样：``

Answer 1

你需要在分配到innerHTML之前找到/替换其中的一些字符串，以确保它呈现为文本而不是HTML代码，如下所示：

function htmlEntities(str) {
    return String(str)
             .replace(/&/g, '&amp;')   // & -> &amp;
             .replace(/</g, '&lt;')    // < -> &lt;
             .replace(/>/g, '&gt;')    // > -> &gt;
             .replace(/"/g, '&quot;'); // " -> &quot;
}

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

摘录源：css-tricks

Answer 2

几乎没有特殊字符，这使得您的字符串看起来像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;'
    };

Answer 3

输出如下：嘿

[..]我可以让它以纯文本输出，以便输出如下：   <b>Hey</b>

在此特定用例中无需执行HTML Encode。只需使用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 4

您必须转义所有HTML特殊字符。

这应该有助于https://stackoverflow.com/a/5406725/7845824

禁用编码html

4 个答案: