在涉及引号时动态生成HTML

Question

我有以下脚本：

function Start() {

    var TheData = 'tes"sst3\'k';

    var TheHTML = '<div class="SomeClass">' + TheData + '</div>';
    TheHTML += '<input type="text" id="TheTextBox" value="';
    TheHTML += TheData + '" />';

    $('#Dynamic').html(TheHTML);
}

基本上，我正在创建HTML并将一些可变文本嵌入其中。问题是文本包含引号，并且由于引号，文本框的值与标签的值不匹配。我怎么解决这个问题？

jsFiddle是here。

由于

Answer 1

让jQuery担心所有这些并生成HTML这样更安全（出于这个原因）：

var $input = $("<input>").attr("id","TheTextBox").val(TheData);
var $div = $("<div>").addClass("SomeClass").text(TheData).append($input);

var $wrapper = $("<div>").append($div);
var TheHTML = $wrapper.html();

Answer 2

由于你正在使用jQuery，而不是担心转义字符串，只需这样做：

$(Start);
function Start() {
    var TheData = 'tes"sst3\'k';
    var TheHTML = '<div class="SomeClass">' + TheData + '</div>';
    TheHTML += '<input type="text" id="TheTextBox" />';
    $('#Dynamic').html(TheHTML);
    $('#TheTextBox').val(TheData);
}

<强> jsFiddle example

Answer 3

您可以对引号进行编码，如下所示：

var TheData = 'tes"sst3'k';

Answer 4

这是你的答案

$(Start);

function Start() {

    var TheData = 'tes"sst3\'k';

    var TheHTML = '<div class="SomeClass">' + TheData + '</div>';
    TheHTML += '<input type="text" id="TheTextBox" value=';
    TheHTML += TheData + ' />';

    $('#Dynamic').html(TheHTML);
}