本文介绍使用正则表达式在 中实时实现“句首自动大写”功能：仅将每个句子开头（即段首或句号后紧跟空格再接字母的位置）的首字母转为大写，避免单词级误触发。
本文介绍使用正则表达式在 `
在表单文本录入场景中，用户常忽略英文句子的首字母大写规范，给后续数据审核带来额外负担。与其依赖用户自觉，不如在前端层主动增强体验——但需注意：不能简单对每个单词首字母大写（如 text-transform: capitalize 或 \b\w 全局匹配），否则会错误地将 iPhone 变成 Iphone、U.S.A. 变成 U.S.A.（中间缩写被破坏）或 don't 变成 Don'T。
理想方案是精准定位两类合法句首位置：
- 文本开头的第一个字母（^ 锚点 + 字母）；
- 句号 . 后紧跟一个空格和一个字母（. \w）。
对应正则表达式为：/(^\w)|(\. \w)/g
其中 | 表示“或”，g 标志确保全局匹配所有符合条件的位置；match => match.toUpperCase() 将整个匹配片段（如 "h" 或 ". t"）转为大写——注意：由于匹配的是 . t，转大写后自然变成 . T，既修正了句首字母，又保留了标点与空格结构。
以下是完整、可直接运行的实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sentence Capitalization</title>
<style>
textarea#input {
width: 100%;
height: 150px;
padding: 12px;
font-size: 16px;
border: 2px solid #333;
border-radius: 4px;
box-sizing: border-box;
margin-top: 16px;
}
</style>
</head>
<body>
<label for="input">请输入英文文本（支持句首自动大写）：</label>
<textarea id="input" oninput="onChange()" placeholder="e.g. hello world. this is a new sentence. and another one."></textarea>
<script>
const stringCapitalize = (str) => {
// 匹配：行首字母 或 “句号+空格+字母”
return str.replace(/(^\w)|(\. \w)/g, match => match.toUpperCase());
};
const onChange = () => {
const input = document.getElementById("input");
// 使用 oninput 而非 onkeyup，兼容粘贴、语音输入等场景
input.value = stringCapitalize(input.value);
};
</script>
</body>
</html>✅ 关键优化说明：
- 将事件监听从 onkeyup 升级为 oninput：可捕获粘贴（Ctrl+V）、拖拽、语音输入、自动补全等所有内容变更，大幅提升鲁棒性；
- 正则未使用 \b（词边界），彻底规避缩写、撇号词（it's, don't）被错误切分的问题；
- 不修改原始标点/空格结构，仅转换目标字母大小写，语义安全。
⚠️ 注意事项：
- 当前逻辑假设句子以 . + 空格结尾；若用户输入 ! 或 ?，需扩展正则为 /^(.)|([.!?] \w)/g；
- 连续多个空格或换行后首字母暂不处理（如 .\n\nhello），如需支持，可增强为 /^(.)|([.!?]\s+\w)/g 并配合 \s+ 匹配任意空白；
- 移动端软键盘的「句首大写」系统级设置（如 iOS 的 autocapitalize="sentences"）与此逻辑互补，建议同时启用：
该方案轻量、无依赖、语义准确，是提升表单输入体验与数据质量的实用前端技巧。
