如何正确使用 CSS 选择器匹配含方括号的 HTML ID 属性-php教程-PHP中文网

如何正确使用 CSS 选择器匹配含方括号的 HTML ID 属性

本文详解为何 document.querySelector('#categories_description[1]') 报错，以及如何安全地在 JavaScript 中选择含特殊字符（如 [、]）的 ID 元素，并给出 PHP + CKEditor 集成的完整修复方案。

本文详解为何 `document.queryselector('#categories_description[1]')` 报错，以及如何安全地在 javascript 中选择含特殊字符（如 `[`、`]`）的 id 元素，并给出 php + ckeditor 集成的完整修复方案。

在前端开发中，当动态生成的 HTML 元素 ID 包含方括号（如 categories_description[1]）时，直接使用 document.querySelector('#categories_description[1]') 会触发错误：“#categories_description[1] is not a valid selector”。这是因为 CSS 选择器规范将 [ 和 ] 视为属性选择器的起始/结束符号（例如 div[data-id="1"]），而非 ID 字符串的普通组成部分。浏览器解析器会误判该字符串为非法语法，导致查询失败。

✅ 正确做法：对特殊字符进行 CSS 选择器转义

若 ID 确实包含 [ 或 ]（常见于 PHP 表单数组命名），必须对这些字符进行双重转义（CSS 转义 + 字符串字面量转义）：

CSS 标准要求：[ → [，] → ]
由于 JavaScript 字符串中反斜杠本身需转义，最终应写作：\[ 和 \]

因此，ID categories_description[1] 对应的有效选择器为：

document.querySelector('#categories_description\[1\]')

? 在 PHP + CKEditor 场景中的完整修复

你当前的 PHP 模板代码生成了类似 id="categories_description[1]" 的 textarea，而 JS 尝试用未转义的 $name 构建选择器，导致失败。以下是推荐的健壮写法：

✅ 步骤 1：PHP 端输出安全的 ID（无需修改 HTML 输出）

保持你原有的 HTML::textAreaCkeditor() 调用不变，它已正确渲染 id="categories_description[1]"。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

✅ 步骤 2：JavaScript 端动态构建转义后的选择器

避免拼接字符串引发转义混乱，改用 CSS.escape()（现代浏览器原生支持）自动处理所有特殊字符：

<script>
<?php foreach ($languages as $lang) : ?>
    <?php $name = 'categories_description[' . (int)$lang['id'] . ']'; ?>
    const escapedId = CSS.escape('<?php echo HTML::output($name); ?>');
    ClassicEditor
        .create(document.querySelector('#' + escapedId), {
            toolbar: [
                'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList',
                'imageUpload', 'ckfinder', 'blockQuote', 'insertTable', 'mediaEmbed',
                'undo', 'redo', '|', 'help'
            ]
        })
        .catch(error => {
            console.error('CKEditor init failed for #', escapedId, error);
        });
<?php endforeach; ?>
</script>

? CSS.escape() 是 W3C 标准方法，能安全转义任意非法 CSS 字符（包括 [, ], ., #, 空格等），比手动替换更可靠，且兼容性良好（Chrome 46+、Firefox 31+、Safari 15.4+、Edge 79+）。

⚠️ 替代方案（兼容旧浏览器）

若需支持 IE 或极老版本，可手动实现简易转义函数：

function escapeCssId(id) {
    return id.replace(/([^w-])/g, '\$1');
}
// 使用：document.querySelector('#' + escapeCssId('<?php echo HTML::output($name); ?>'))

? 关键注意事项

❌ 不要尝试用 #categories_description[1] 字面量硬编码——JS 字符串中单反斜杠会被忽略，必须写 \[。
❌ 避免在 ID 中使用 [/]：长远来看，建议重构命名规则，例如改用 categories_description_1 或 categories_description_lang1，从根本上规避问题。
✅ 始终验证元素存在：document.querySelector(...) 返回 null 时调用 .create() 会报错，建议加空值判断：
```
const el = document.querySelector('#' + escapedId);
if (el) {
    ClassicEditor.create(el, { /* config */ });
}
```

通过 CSS.escape() 自动转义 + 显式元素存在性检查，即可彻底解决动态 ID 含方括号导致的选择器失效问题，确保 CKEditor 在多语言表单场景下稳定初始化。