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

Question

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

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

这就是我创建文本框的方式:

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

注意 value='"+ spanContent + "' 部分，如果 spanContent 中有单引号，这就是中断的地方。现在，我知道我可以这样做:

value = \"" + spanContent + "\"

工作正常..但是，当 spanContent 有双引号时，它再次中断..

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

我创建了这个 on jsfiddle here 的小型复制品给你玩..

谢谢。

Answer 1

对于初学者来说，如果您正在使用 jQuery，请在创建元素时利用它的模块化特性。从安全 Angular 来看，不仅写出 HTML 元素不好，而且还容易出错(正如您所确定的那样)。但是，您会很高兴知道总有更好的方法:

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

现在你有一个新的 <input>可以附加、操作等的元素。你也可以用“长”的方式来做:

var input = $('<input />')
  .attr({'type':'text','id':'t'+index})
  .val(spanContent)
  .addClass('dynTxt');

这导致生成相同的元素:

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

最好的部分是任何问题(如引号)都会为您解决，让您只写您需要的内容。