本文介绍如何通过正则表达式在 HTML 中实时实现“句首自动大写”——即每个句子开头的第一个字母（紧跟在句号加空格后，或文本开头）自动转为大写，避免误触发单词级首字母大写。
本文介绍如何通过正则表达式在 html `
在表单文本输入场景中，用户常忽略英文句子的首字母大写规范，给后续内容审核带来额外负担。与其依赖用户自觉，不如在前端自动补全：仅对每个句子的起始字母进行大写转换，而非对每个单词首字母（如 .replace(/\b\w/g, ...) 那样），这才是真正符合语法习惯的“句首大写”。
核心逻辑在于精准匹配两类位置：
- 文本开头的第一个字母（^ 锚点 + 字母）；
- 句号后紧跟一个空格和一个字母（. \w）。
对应正则表达式为：/(^\w)|(\. \w)/g
其中 | 表示“或”，g 标志确保全局匹配，match => match.toUpperCase() 将捕获到的整个匹配字符串（如 "h" 或 ". w" 中的 "w"）统一转为大写。
以下是完整、可直接运行的实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sentence Capitalization</title>
<style>
textarea#input {
width: 100%;
max-width: 600px;
height: 150px;
padding: 12px;
font-size: 16px;
border: 2px solid #333;
border-radius: 4px;
box-sizing: border-box;
}
</style>
</head>
<body>
<textarea id="input"
oninput="onChange()"
placeholder="Type a sentence. Try: hello world. this is another sentence. and one more."></textarea>
<script>
const stringCapitalize = (str) => {
// 匹配：行首字母 或 “. ”后紧跟的字母
return str.replace(/(^\w)|(\. \w)/g, match => match.toUpperCase());
};
const onChange = () => {
const input = document.getElementById("input");
input.value = stringCapitalize(input.value);
};
</script>
</body>
</html>✅ 关键优化说明：
- 使用 oninput 替代 onkeyup：支持粘贴、鼠标右键粘贴、语音输入等所有输入方式，响应更全面；
- 正则中 (\. \w) 精确匹配「句号 + 空格 + 字母」，避免误触缩写（如 "U.S.A." 中的 S 或 A）；
- 不处理其他标点（如 ?、! 后），如需扩展，可将正则升级为 /([.!?] \w)|(^|\n)\w/g；
- 注意：当前方案假设句子以 .（句号+空格）分隔；若用户输入 .a 或 . 后无空格，则不会触发大写——这是合理设计，因严格语法中句号后应有空格。
⚠️ 注意事项：
- 该方案为客户端轻量处理，不替代服务端校验；提交前仍建议后端做二次规范化；
- 避免在长文本或高频输入场景中频繁重赋值 textarea.value，可能影响光标位置；如需保留光标，需额外保存/恢复选区（本文聚焦基础逻辑，暂未展开）；
- 若需兼容中文语境下的「句号、问号、感叹号」后自动大写，可将正则扩展为 /([.!?。？！] +\w)/g（注意 Unicode 全角符号及多空格容错）。
一句话总结：用 (^\w)|(\. \w) 精准锚定句首位置，配合 oninput 实时响应，即可优雅实现符合英文书写规范的自动句首大写。
