Question

我正在构建一行，使用jQuery通过创建一个html字符串插入表中，即

var row = "";
row += "<tr>";
row += "<td>Name</td>";
row += "<td><input value='"+data.name+"'/></td>";
row += "</tr>";

data.name是从ajax调用返回的字符串，可以包含任何字符。如果它包含单引号'，它将通过定义属性值的结尾来中断HTML。

如何确保在浏览器中正确呈现字符串？

Answer 1

您只需要将任意'个字符与等效的HTML实体字符代码交换：

data.name.replace(/'/g, "&#39;");

或者，你可以使用jQuery的DOM操作方法创建整个东西：

var row = $("<tr>").append("<td>Name</td><td></td>");
$("<input>", { value: data.name }).appendTo(row.children("td:eq(1)"));

Answer 2

" = &quot; or &#34;

' = &#39;

示例：

<div attr="Tim &quot;The Toolman&quot; Taylor"
<div attr='Tim "The Toolman" Taylor'
<div attr="Tim 'The Toolman' Taylor"
<div attr='Tim &#39;The Toolman&#39; Taylor'

在JavaScript字符串中，使用\来转义引号字符：

var s = "Tim \"The Toolman\" Taylor";
var s = 'Tim \'The Toolman\' Taylor';

因此，请引用属性值“并使用如下函数：

function escapeAttrNodeValue(value) {
    return value.replace(/(&)|(")|(\u00A0)/g, function(match, amp, quote) {
        if (amp) return "&amp;";
        if (quote) return "&quot;";
        return "&nbsp;";
    });
}

Answer 3

我的答案部分基于Andy E，我仍然建议阅读verdy_p写的内容，但这里是

$("<a>", { href: 'very<script>\'b"ad' }).text('click me')[0].outerHTML

免责声明：这不是针对确切问题的答案，而只是＆＃34;如何逃避属性＆＃34;

Answer 4

给定的答案看起来相当复杂，所以对于我的用例，我尝试了内置的encodeURIComponent和decodeURIComponent，并发现它们运行良好，根据评论，这不会逃脱{{1}但为此，您可以使用'和escape()方法。

Answer 5

我认为你可以做到：

var row = "";
row += "<tr>";
row += "<td>Name</td>";
row += "<td><input value=\""+data.name+"\"/></td>";
row += "</tr>";

如果您担心data.name是现有的单引号。

在最好的情况下，您可以为其创建INPUT元素，然后setValue(data.name)。

Answer 6

使用Lodash：

const serialised = _.escape("Here's a string that could break HTML");

// Add it into data-attr in HTML
<a data-value-serialised=" + serialised + " onclick="callback()">link</a>
// and then at JS where this value will be read:
function callback(e) {  
    $(e.currentTarget).data('valueSerialised'); // with a bit of help from jQuery

    const originalString = _.unescape(serialised); // can be used as part of a payload or whatever.
}

如何在HTML属性值中转义引号？

6 个答案: