jquery转义方括号以选择元素答案

【问题标题】：jquery escape square brackets to select elementjquery转义方括号以选择元素
【发布时间】：2012-01-14 07:09:57
【问题描述】：

考虑一个输入元素

<input id="meta[152][value]" type="text" />

这里的输入字段是动态生成的。我需要选择该字段。所以我用了，

alert($('#meta[152][value]').val());

但这似乎是无效的。搜索后发现，“方括号”需要像#meta\\[152\\]\\[value\\]一样转义

那么该怎么做呢？我目前使用这个代码，

var id = "#meta[152][value]" // (I get this value by another method) I need the escaping to be done here. So that i can use as

/** 我需要使用正则表达式、替换或任何其他方法来转义 id 的值得到#meta\[152\]\[value\] 而不是手动**/

alert($(id).val());

您的建议会有所帮助！

【问题讨论】：

What is the difference between these different ways to escape square brackets inside jQuery selectors 的可能重复项

标签： javascript jquery regex jquery-selectors escaping

【解决方案1】：

嗯，只需将转义值直接放入您的字符串中即可。

var id = "#meta\\[152\\]\\[value\\]";

See it working here

【讨论】：

感谢您的尝试.. 但我只是以 id = "#meta[152][value]" 为例，我无法直接更改它。需要使用正则表达式更改或替换

【解决方案2】：

以下应该有效：

alert($('#meta\[152\]\[value\]').val());

或

var id = "#meta\[152\]\[value\]";
alert($(id).val());

Working Example

转换函数：

function ConvertValue(id)
{
    var test = id.replace(/[[]/g,'\\\\[');
    return "#" + test.replace(/]/g,'\\\\]'); 
}

Conversion Example

【讨论】：

感谢您的尝试.. 但我只是以 id = "#meta[152][value]" 为例，我无法直接更改它。需要使用正则表达式更改或替换
Aakash，我添加了一个转换函数来将您的 id 值转换为您需要使用选择器的值。让我知道这是否适合您
更新了函数并添加了一个示例，希望对您有所帮助。您应该能够将 id 传递给它，它应该为您返回正确的选择器。
当我使用返回值时，我无法选择元素！！会是什么原因？ jsfiddle.net/vaakash/KqvMM/3
如果您使用返回 '#YourTestValue' 的返回函数，那么要使用 jQuery 选择它，您可以简单地将返回值放入选择器中，例如：$("#YourTestValue" ) 来选择那个元素

【解决方案3】：

如果您在不转义的情况下感觉更舒服，您还可以使用属性选择器并搜索具有该 id 的元素，如下所示：$("[id='meta[152][value]']")

【讨论】：

【解决方案4】：

这应该对你有用，你几乎拥有它：

    $(document).ready(function() {
       var id = "#meta\\[152\\]\\[value\\]";
        alert($(id).val()); 
    });

【讨论】：

【解决方案5】：

最简单的方法就是使用常规的getElementById，不需要转义：

document.getElementById("meta[152][value]").value;

【讨论】：

并且不要忘记 a) 删除前导哈希 (#) b) 添加尾随 .value

【解决方案6】：

您可以使用 Lodash 库中的 _.escapeRegExp 方法。

console.log($('#' + _.escapeRegExp('meta[152][value]')).val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<input id="meta[152][value]" type="text" value='Test' />

【讨论】：