在jquery/javascript中创建文本框时如何在中转义引号？

我有几个span元素，我需要将这些span元素的内容放到一个文本框中，以便用户可以编辑

可能有任意数量的span元素，因此必须在运行时创建文本框。我遇到的问题是，当文本包含单引号时，它会干扰我的文本框值，因为它会关闭其中一个引号

以下是我创建文本框的方式：

var spanContent = $(value).text();
var tmpTextBox = "<input type='text' id='t" + index + "' value='" + spanContent  + "' class='dynTxt' />";

好的。。但是，当

spanContent

包含双引号时，它会再次中断

请问，在这种情况下，最安全的单引号和双引号转义方法是什么？我无法对它们进行html编码，因为textbox值不支持它们

我为你制作了一个小复制品

---

谢谢。

对于初学者，如果您使用jQuery，请在创建元素时充分利用它的模块化程度。从安全的角度来看，写出HTML元素不仅不好，而且容易出错（正如您所确定的）。但是，您会很高兴知道总有更好的方法：

var input = $('<input />',{
  'type': 'text',
  'id': 't'+index,
  'value': spanContent,
  'class': 'dynTxt'
});

var输入=$（“”{
“类型”：“文本”，
'id'：'t'+索引，
“值”：内容，
“类”：“dynTxt”
});

现在，您有了一个新的

元素，可以附加、操作等。您还可以通过“长”方式来完成：

var输入=$（“”）
.attr（{'type'：'text'，'id'：'t'+index}）
.val（内容）
.addClass（“dynTxt”）；

这将导致生成相同的元素：

<input type="text" id="t_index_" value="_spanContent_" class="dynTxt" />

最好的是，任何问题（如引号）都会为您解决，让您只编写所需的内容。

var tmpTextBox=$（“”{
var tmpTextBox = $("<input>", {
    type: "text",
    id: "t" + index,
    val: spanContent,
    'class': "dynTxt"
});

键入：“文本”，
id:“t”+索引，
瓦尔：斯潘内容，
“类”：“dynTxt”
});

---

在创建元素后设置值如何，而不是尝试连接字符串

var spanContent = $(value).text();
var tmpTextBox = "<input type='text' id='t" + index + "' class='dynTxt' />";
$('#container').append($(tmpTextBox).val(spanContent));

var spanContent=$（value）.text（）；
var tmpTextBox=“”；
$（“#容器”）.append（$（tmpTextBox.val（spanContent））；

下面是您更新的JSFIDLE，显示了这一点：

---

看起来我们说的都差不多。正如在其他答案中提到的，您可以将相同的总体思路应用于所有属性，而不仅仅是值。

如果文本仅在浏览器中用作标记文本，则有一个比较严厉的选项是将所有单引号替换为其HTML ascii表示形式。在这种情况下：

var spanContent = $(value).text().replace("'", "'");

达到了预期的效果

var tf = document.createElement("input");
tf.setAttribute("type","input");
tf.setAttribute("name","_tf");
var txt = "Hello. This using slash \\ quote \"";
tf.setAttribute("value",txt);
document.childNodes[1].appendChild(tf);

这只是在纯javascript中实现的

---

现场工作

您需要引用

类

，而且jQuery针对

“

进行了优化<代码>'有效，但这是额外的工作（并且键入：P）。@Esailija:的确，很好的捕获。FF能处理，但（不喜欢）啊！并不是我选择这样创建输入元素，只是我不知道有什么更好的。。我可以这样做，谢谢，现在就试试吧！我刚刚发现我可以用jquery来实现这一点，这给我留下了深刻的印象。在文档中哪里可以找到它？@blake305:--我们需要注意，这个方法会根据需要转义提供的字符串，以便在HTML.hm中正确呈现，我确信这不会起作用。。但确实如此，为什么它会起作用？textbox如何知道转换

'到
单引号
，但不是
"e？对不起，如果这是一个愚蠢的问题！因为"e；这是不对的。双引号是“双引号”，而单引号在HTML ascii代码中没有名称，因此使用ascii编号。
var spanContent = $(value).text().replace("'", "'");

var tf = document.createElement("input");
tf.setAttribute("type","input");
tf.setAttribute("name","_tf");
var txt = "Hello. This using slash \\ quote \"";
tf.setAttribute("value",txt);
document.childNodes[1].appendChild(tf);