处理值内包含 HTML 的输入（使用 jQuery）

Question

我创建了一个类似于就地编辑插件的小功能。

它的作用：

• 点击获取元素的html内容：var editable = $(this).html();

• 创建文本输入字段（如果存在则获取）：

  var input = ($('input', this).length > 0) ? $('input', this) : $('<input type="text" value="' + editable + '" />'),
  

• 用输入替换元素文本：$(this).empty().append(input);

只有当可编辑文本不包含非编码的 HTML 字符时才有效。

如果它有像​​<>这样的HTML字符，它们会在第二步被转换为HTML代码，并弄乱输入元素......

我试图通过以下方式逃避它们：

editable = $('<div/>').text($(this).html()).html()

然后我得到一个带有转义 HTML 的文本输入 lol :)

我能做什么？

Answer 1

您可以对字符串进行 HTML 转义，以便将其包含在 HTML 属性值中，如下所示：

var escaped = string.replace(/</g, '&lt;').replace(/'/g, '&#39;').replace(/"/g, '&#34;');