如何使用/传输包含特殊字符的 attr('id')？答案

【问题标题】：How to use/transmit attr('id') containing special chars?如何使用/传输包含特殊字符的 attr('id')？
【发布时间】：2013-03-11 09:38:44
【问题描述】：

我已经搜索了一些与此相关的问题（例如How to handle special characters in html element id/name in Jquery validation?），但不幸的是它对我没有帮助，或者我没有理解这个技巧......

假设我们有一个按钮，其类为.bt，id 为my|id。（或其他特殊分隔符，如,:;|）

似乎无法使用它来匹配另一个元素，例如$('#other_'+$('.bt').attr('id'))

你可以看到example here。

所以我的问题是，如何传输这些特殊字符 (,:;|)？

【问题讨论】：

特殊字符必须用\\转义。 api.jquery.com/category/selectors
好的，谢谢，在这种情况下我该怎么做呢？用replace('|','\|',id) ？还是其他方法？
你为什么要把这些特殊字符放在你的 ID 中？ ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). - Basic HTML data types
@couzzi 在 HTML4 中是正确的，但不是 HTML5。
我会被诅咒的！只需阅读this。很高兴知道。谢谢大佬。

标签： javascript jquery special-characters

【解决方案1】：

像这样？

$('#other_' + $('.bt').attr('id').replace('|', '\\|'));

http://jsfiddle.net/S669p/

【讨论】：

感谢您的回答，但似乎其他回复更好，反正+1（不需要其他用户得到的-1）

【解决方案2】：

这行得通：

$('[id="div_' + id + '"]').html(id);

而不是这个：

$('#div_'+id).html(id);

~~小提琴here~~

-编辑-

New fiddle 显示,:;| 的用法

【讨论】：

+1 非常感谢，这似乎是使用 jquery 选择器的更好解决方案，没有 regexp/replace。
好建议，但这需要额外的工作，因为浏览器不能使用更快的document.getElementById。 jQuery 要么必须使用 Sizzle（并首先解析它，可能最终使用 getElementById），要么必须使用 document.querySelectorAll。不是说你会注意到它，但至少要记住它
好点伊恩！我认为这可以归结为两害相权取其轻。
mmh，所以我想最好检查一下 Nick Matantsev 的回复？
@Ian - 确实如此，但我的主要争论是使用document.getElementById 与 jQuery 并行；虽然完全有效，但它只是感觉错了。

【解决方案3】：

这是与纯jQuery解决方案的偏差，但也许在这种情况下使用原生document.getElementById(...)函数更好？

$(document.getElementById('other_' + $('.bt').attr('id')))

它读起来有点冗长，但似乎比使用正则表达式更清晰/一致/安全。

【讨论】：

+1 感谢这个解决方案，它也可以，但是 couzzi 解决方案使用 jquery 更好。
couzzi 提供的解决方案更加简洁，但不会转义" 字符，也可能存在性能问题（无关紧要）。 YMMV :)
是的，关于上面的cmets，我会检查你的答案，让客户更快地执行。
@couzzi 是的，抱歉，您的解决方案也不错，但速度较慢，谢谢！

【解决方案4】：

这是一个仍然使用 id 选择器的示例，但也允许使用您希望能够使用的任何特殊字符：

$(document).ready(function () {
    $(".bt").on("click", function () {
        var escaped = $(this).attr("id").replace(/([,:;|])/g, "\\$1");
        console.log("escaped: " + escaped);
        $("#other_" + escaped).toggleClass("testing");
    });
});

http://jsfiddle.net/Bz3Kw/1/

【讨论】：

+1 谢谢，这行得通，但我保留它以供其他用途，因为其他回复似乎更轻松。