安全的JavaScript字符，用作列表ID属性中的键值对

Question

我有一个树视图（使用dyna树版本），并且我扩展了JS以包括多个上下文菜单。

本来我在用

<li id="@ID@:3.@TYPE@:3">

保留我可能需要的详细信息，并将其转换为JSON，如下所示：

//Gets the ID value
var node = $.ui.dynatree.getNode(span).toString()
node = node.replace(/|/g, '\"')
node = node.replace(".", ',')
node = jQuery.parseJSON('{' + node + '}');

很好，但是不幸的是，这是在剃刀MVC视图中使用的，所以@出来了。 我不想要@@，所以以为| 可能是更好的分隔符

<li id="|ID|:3.|TYPE|:3">

但是将JS转换为

var node = $.ui.dynatree.getNode(span).toString()
node = node.replace(/|/g, '\"')
node = node.replace(".", ',')
node = jQuery.parseJSON('{' + node + '}');

解析JSON时给我一个错误。 关于什么是错误的以及应该使用哪些字符有什么建议吗？

Answer 1

正则表达式应该是/\\|/g ，因为| 是正则表达式中的特殊字符。 无论如何，这是一种非常可怕的方法，您可以将json直接放在一个元素中：

<span id="hello" data-json='{"ID":3, "TYPE": 3}'></span>

当您使用.data()时，jQuery甚至会自动为您解析json：

$("#hello").data("json").TYPE; //3

http://jsfiddle.net/jJQ7z/

Answer 2

您不应该为ID使用这些类型的值。 id应当是页面上给定对象的简单名称，主要用于获取JavaScript调用的对象。 最好的做法是只为需要使用ID的页面上的元素提供ID，因为这样可以防止您在不使用ID的元素上使用好ID名称。

如果您需要在标签中包含补充数据，则可以创建以data-开头的自定义标签。 您可以将所需的任何信息放入所需的许多此类标记中，并且这些标记仍是完全有效的HTML。 例如：

<li data-myId="3" data-type="3">

然后，您可以像其他任何属性值一样在JavaScript中检索这些值。