如何将全大写文本转为首字母大写？求助jQuery实现方案

当然可以用jQuery搞定这个问题！你提到的text-transform: capitalize的局限确实很头疼——它只会把每个单词的首字母转为大写，但不会处理原本就大写的其余字符，所以全大写的文本用它之后还是大写居多，根本达不到统一格式的效果。

下面是我常用的解决方案，不管你的动态变量NAME和SURNAME是全大写、全小写还是混合格式，都能统一转换成每个单词首字母大写、其余小写的格式：

1. 先写一个通用的格式转换函数 #

这个函数是核心，先把整个字符串转成小写，再通过正则匹配每个单词的首字母并转为大写：

function toTitleCase(str) {
  // 先把整个字符串统一转小写，解决原字符串全大写的问题
  return str.toLowerCase().replace(/\b\w/g, function(char) {
    // 把每个单词的首字母转大写
    return char.toUpperCase();
  });
}

• str.toLowerCase()：先抹平所有大小写差异，确保后续只处理首字母
• /\b\w/g：正则精准匹配每个单词的第一个字符（\b代表单词边界，\w匹配字母类字符）
• 回调函数负责把匹配到的首字母转为大写

2. 用jQuery应用到你的页面元素 #

假设你的HTML是这样渲染动态变量的（比如通过模板引擎输出）：

<p>姓名：<span class="name-text">NAME</span></p>
<p>姓氏：<span class="surname-text">SURNAME</span></p>

你可以在DOM加载完成后，用jQuery选择这些元素，调用转换函数更新文本：

$(document).ready(function() {
  // 处理姓名变量
  var rawName = $('.name-text').text();
  $('.name-text').text(toTitleCase(rawName));
  
  // 处理姓氏变量
  var rawSurname = $('.surname-text').text();
  $('.surname-text').text(toTitleCase(rawSurname));
});

如果是直接从后端拿到变量再插入页面，也可以先转换格式再插入：

// 假设从后端获取的动态变量（格式不统一）
var rawName = "JOHN";
var rawSurname = "doe";

// 先统一格式
var formattedName = toTitleCase(rawName);
var formattedSurname = toTitleCase(rawSurname);

// 插入到页面中
$('.name-text').text(formattedName);
$('.surname-text').text(formattedSurname);

测试效果 #

不管输入是什么格式，这个方法都能输出统一的结果：

• 输入"ALICE" → 输出"Alice"
• 输入"bob" → 输出"Bob"
• 输入"jANE sMITH" → 输出"Jane Smith"

内容的提问来源于stack exchange，提问作者aliengirl a.k.a. alien no.155