在jQuery内部，处理CSS样式属性名时有一个经常被忽略但设计得很精巧的函数camelCase。它将连字符形式的CSS属性名转换成DOM style对象所要求的驼峰写法，而实现这一转换的核心就是两个预编译的正则对象：rmsPrefix和rdashAlpha。这两个正则对象各司其职，配合完成了一个看似简单却包含边界条件处理的字符串转换任务。
为什么连字符转驼峰需要特殊处理
CSS样式表中的属性名习惯使用连字符分隔单词，例如background-color、border-top-left-radius。而JavaScript操作DOM样式时，style对象上的属性名采用驼峰写法，比如backgroundColor、borderTopLeftRadius。因此jQuery在读取或设置样式时，必须先把用户传入的连字符形式转换成驼峰形式，否则就会取到undefined或者设置无效。
最直观的转换方式是用一个全局正则表达式匹配所有连字符后面的小写字母，然后通过replace的回调函数把它转换成大写。这个思路没有错，代码也非常简短，但当字符串以-ms-开头时，就会产生一个不易察觉的错误。下面是一个朴素实现的示例：
function naiveCamelCase(str) {
return str.replace(/-([a-z])/g, function(all, letter) {
return letter.toUpperCase();
});
}
console.log(naiveCamelCase('background-color')); // backgroundColor
console.log(naiveCamelCase('-ms-transform')); // MsTransform
输出结果中，-ms-transform被转换成了MsTransform，而不是浏览器CSSOM所期望的msTransform。原因在于正则表达式会匹配-ms-中的字母m，并将它直接转成大写M。这看起来符合一般规则，但对于微软私有前缀来说，前缀本体应该保持为小写的ms，只有后面的transform才需要转换首字母。这个边界问题正是jQuery引入rmsPrefix的原因。
rmsPrefix：精准拦截-ms-前缀
rmsPrefix的定义是/^-ms-/。这个正则对象只做一件事：如果字符串以-ms-开头，就把这个前缀替换成ms-。注意替换结果中的ms仍然保持小写，并且故意在末尾保留了一个连字符，这样后续的rdashAlpha仍然可以继续处理后面的部分。锚点^确保它只匹配字符串开头，不会误伤中间可能出现的类似片段。虽然CSS属性名几乎不会出现中间的-ms-，但使用锚点让意图更加明确，也避免了不必要的扫描。
完整的jQuery风格camelCase实现如下：
var rmsPrefix = /^-ms-/;
var rdashAlpha = /-([a-z])/g;
function camelCase(str) {
return str.replace(rmsPrefix, 'ms-').replace(rdashAlpha, function(all, letter) {
return letter.toUpperCase();
});
}
console.log(camelCase('-ms-transform')); // msTransform
console.log(camelCase('background-color')); // backgroundColor
执行流程非常清晰：第一步先把开头的-ms-替换成ms-，字符串变成ms-transform；第二步再用rdashAlpha匹配连字符后面的字母t并转成大写T，最终得到msTransform。对于普通的background-color，第一步替换不会命中，直接进入第二步，转换成backgroundColor。两段式替换虽然多了一次replace调用，但换来了对特殊前缀的准确处理，并且每次调用的开销可以忽略不计。
rdashAlpha：全局匹配与replace回调配合
rdashAlpha的正则字面量是/-([a-z])/g。其中连字符是普通字符，表示要匹配连字符本身；捕获组([a-z])只匹配一个小写字母，并把它保存下来供回调函数使用；末尾的g标志表示全局匹配，也就是一次性替换字符串中所有符合条件的连字符字母组合，而不仅仅是第一处。少了这个标志，像border-top-left-radius这样的多段连字符字符串就只能转换第一段，后面的top和left仍然保持原样。
replace方法的第二个参数传入了一个回调函数，这个回调在每次匹配成功时被调用。第一个参数是完整匹配项，例如-border-color中的-t；第二个参数是第一个捕获组，也就是要去掉连字符并转大写的字母。回调里只需要返回letter.toUpperCase()，replace就会用这个返回值替换掉原来的-t。相比先split再map最后join的写法，replace回调直接完成查找、转换和拼接，既简洁又减少了中间数组的内存分配。
下面的示例展示了回调函数接收到的参数，有助于理解匹配过程：
'-webkit-transform'.replace(/-([a-z])/g, function(match, letter, offset, str) {
console.log(match, letter, offset, str);
return letter.toUpperCase();
});
代码会分别匹配-w和-t，两次输出依次是-w, w, 0, ...和-t, t, 7, ...。这也解释了为什么-webkit-transform经过转换后会变成WebkitTransform，因为首字母w同样被大写。在jQuery的实际源码中，rdashAlpha只对小写字母a到z做处理，数字和其他特殊字符不会被匹配，避免了对类似-1px这样非字母场景的误转换，保证了正则的精确性和执行效率。
正则对象预编译与性能考量
jQuery把rmsPrefix和rdashAlpha定义为模块级变量，而不是在camelCase函数内部创建。这样做的直接好处是正则对象只编译一次，后续每次调用函数时直接复用已编译好的正则实例。如果像下面这样把正则字面量写在函数内部，每次执行函数都会创建两个新的RegExp对象，增加垃圾回收压力，尤其在camelCase这种可能被频繁调用的工具函数中，累积的影响不容忽视。
// 不推荐：每次调用都创建两个正则对象
function badCamelCase(str) {
return str.replace(/^-ms-/, 'ms-').replace(/-([a-z])/g, function(all, letter) {
return letter.toUpperCase();
});
}
现代JavaScript引擎虽然对正则字面量有一定的内部缓存机制，但这并不能完全保证在所有运行环境下都避免重复创建。将正则明确提升到模块作用域是更可控的优化手段，也能让代码阅读者一眼看出这些正则是固定的、不会随调用而变化的。另外，全局标志g与replace配合时，引擎内部会从上次匹配结束的位置继续搜索，避免了手动循环调用exec的低效模式。
另一个性能细节是字符类的设计。rdashAlpha使用[a-z]而不是更宽泛的\w或.，因为CSS属性转换只需要处理小写字母，数字和大写字母不需要变化。更精确的字符类缩小了可能匹配的范围，让正则引擎能够更快地排除无效路径。rmsPrefix没有全局标志，因为-ms-只可能出现在开头一次，使用无g的正则配合锚点^能让引擎在找到开头匹配后立即结束，不做多余扫描。
从jQuery实现中提炼的优化策略
这两个正则对象虽然只服务于一个简短的转换函数，却集中体现了正则表达式优化中的几个通用原则：把不会变化的规则预先编译成模块级对象，避免重复构造；用精确的字符类和锚点缩小匹配范围；充分利用replace的回调机制完成定制化转换；全局标志确保所有目标都被处理；对于特殊边界情况，可以拆分成多个步骤分别处理，而不是把所有规则硬塞进一个复杂正则。
如果在自己的项目里也需要做类似字符串格式转换，完全可以直接借鉴这套模式。下面是一个带断言测试的完整示例，验证了四个典型输入：
var rmsPrefix = /^-ms-/;
var rdashAlpha = /-([a-z])/g;
function camelCase(str) {
return str.replace(rmsPrefix, 'ms-').replace(rdashAlpha, function(all, letter) {
return letter.toUpperCase();
});
}
console.assert(camelCase('-ms-transform') === 'msTransform');
console.assert(camelCase('background-color') === 'backgroundColor');
console.assert(camelCase('border-top-left-radius') === 'borderTopLeftRadius');
console.assert(camelCase('-webkit-transform') === 'WebkitTransform');
从结果可以看出，除了-ms-前缀被特殊保留为小写外，其余连字符后面的字母都按照统一规则转成了大写。这种拆分处理的方式不仅让代码更容易维护，也避免了在单个正则表达式中写复杂的条件判断。当需要处理其他厂商前缀时，只需要按同样思路增加一个预处理正则即可，而不会影响主体转换逻辑。
jQuery正则表达式camelCase转换修改时间：2026-10-06 21:16:20