使用 URL 编码/解码从用户输入到 HTML5 数据属性的转义/特殊字符

Question

这是我关于 stackoverflow 的第一个问题 - 需要各位专家的帮助。我们的网络应用程序允许用户输入转义/特殊字符。我们正在对极端情况进行一些测试。我能够通过 ajax/json 传递转义字符。

var test = JSON.stringify({
  typeName: $("#typeName").val(),
  invoiceType: 'NewTypeArea'
});
$.ajax({
  type: "POST",
  url: "BackEnd/WebService.php",
  data: {
    newInvoice: test
  },
  dataType: 'json'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

我的后端开发人员使用转义/特殊字符来做他们的事情。当我再次拨打电话时，我得到以下 JSON 数据

[{"propName":"Special '\"'\\","typeName":"type'\"\\"}]

返回的数据是正确的。为简单起见——这个例子我只有一个对象——我把这些数据放到一个下拉列表中。

$.each(data, function(i, val) {
var output = '<option class="type" id="' + this.qfInvoiceNum + '" value="' + this.typeName + '">' + this.typeName +'</option>';
$('select#typeList').append(output);

});

它正确显示所有转义/特殊字符。例如："type'\"\" 显示为 type'\"\

然后用户选择列表项之一。我尝试使用数据属性、值等多种方式捕获 typeName。这是一个示例：

$( '.selectChange1').change(function() {
typeGrab = $('select option.type:selected').val();
pullArea();
});

但这就是问题所在。如果他们选择带有特殊/转义字符的列表项，则控制台返回的值

"type'"

不是

"type'\"\\"

当然，当我为 JSON/AJAX 调用传入 var typeGrab 时，这是错误的。

关于如何从下拉列表中获取转义/特殊字符是否有很好的解决方案？或者，当我遍历数据时，也许我在使用 $.each 时出错了？或者，很可能，我错过了一些非常简单的东西。任何帮助或见解都会很棒。

谢谢。

附加信息。第一个解决方案确实有效。但是，我最初并没有使用它，因为有几次显示的文本不是我想要抓取的 - 这就是我尝试 data*-attributes 的原因。

例如：

$.each(data, function(i, val) {
var output = '<option id="' + this.qfInvoiceNum + '" class="type" data-index="' + this.typeName + '" >' + this.typeName +' | #' + this.qfInvoiceNum +'</option>';
$('select#typeList').append(output);
}); 

如果我希望 this.typeName 的值带有转义/特殊字符，则提供的解决方案不起作用。我不能使用数据属性或 html 选项值。

但是，经过大量研究，如果您希望将值传递给具有转义/特殊字符的数据属性，我发现了一个很好的解决方案。请在下面回答我。

Answer 1

经过大量研究，我找到了我正在寻找的解决方案。如果您想在 html5 数据属性中使用转义/特殊字符，那么一个很好的解决方案是使用 encodeURI()/decodeURI()：http://www.w3schools.com/jsref/jsref_decodeuri.asp

这个问题的解答：

编码的url版本的值并为select设置值：

$.each(data, function(i, val) {
     var uri = val.typeName;
     var res = encodeURI(uri);
     var output = '<option id="' + this.qfInvoiceNum + '" class="type" data-name="' + res + '" >' + this.typeName +' | #' + this.qfInvoiceNum +'</option>';
     $('select#typeList').append(output);
    }); 

在选择时，抓取编码的 uri，然后解码 uri

$('.selectChange2').change(function() {
    uriTypeGrab = $('select option.type:selected').data('name');
    typeGrab = decodeURI(uriTypeGrab);
});

typeGrab 现在格式正确，包含所有转义/特殊字符，并准备传递给 JSON.stringify() 以进行 ajax 调用。

Answer 2

不太确定是否真正理解了整个问题。无论如何，这就是我指出的强制导致一些问题。

当你创建一个像这样的<option> 时：

'<option class="type" id="' + this.qfInvoiceNum + '" value="' + this.typeName + '">' + this.typeName +'</option>'

然后this.typeName 用于填充value 属性和节点内容。

正如您所报告的，在后一种情况下一切都很好，因为从 HTML 的角度来看，当前的 typeName 内容在这里没有什么特别之处。

但在value 属性中，内容位于引号内，这里也不能是中性的。

如果没有更深入的分析和测试，我不能完全肯定，但第一个非常简单的尝试是根本不填充 value 属性，使用 HTML 功能从其透明推断 option 值没有给出value 时的节点内容。

这样，内容应该可以摆脱书面value的表述约束。让我知道它是否有效...