如何自动规范HTML页面文本大小写？Prettier能否胜任该任务？

Prettier的定位 #

Prettier不负责文本内容的大小写规范，它的核心作用是统一代码的格式（比如HTML标签缩进、属性排序、换行规则等），不会修改标签内部的文本内容——也就是说它只会调整<strong>"HOW Does That SOund?"</strong>的代码格式，不会改动引号里的文本大小写。

自动处理文本大小写的可行方案 #

1. 前端运行时动态处理（JavaScript） #

可以编写自定义脚本，遍历DOM中的文本节点，对非代码类文本进行大小写规范化，同时跳过<pre>、<code>等需要保留原始格式的标签。

示例代码：

function normalizeTextCase() {
  // 创建遍历器，只处理文本节点，跳过pre/code标签
  const walker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT,
    {
      acceptNode: node => {
        const parentTag = node.parentElement?.tagName.toLowerCase();
        return (parentTag !== 'pre' && parentTag !== 'code') ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
      }
    }
  );

  let node;
  while (node = walker.nextNode()) {
    const text = node.textContent.trim();
    if (!text) continue;
    // 按句子分割，处理每个句子首字母大写，其余小写
    node.textContent = text.replace(/(^|\.|\?|\!)\s*([a-z])/gi, (match, separator, char) => {
      return separator + ' ' + char.toUpperCase();
    }).toLowerCase().replace(/^\w/, c => c.toUpperCase());
  }
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', normalizeTextCase);

注意：这种方法会处理所有符合条件的文本，若有需要保留大小写的专有名词（如"NASA"），需额外添加白名单逻辑。

2. 构建时静态处理（PostHTML插件） #

如果是静态站点或使用构建工具（如Webpack、Vite），可以用PostHTML的posthtml-text-transform插件，在构建阶段批量处理HTML文本内容，无需运行时开销。

配置示例（以Vite为例）：

// vite.config.js
import posthtml from 'posthtml';
import textTransform from 'posthtml-text-transform';

export default {
  plugins: [
    {
      name: 'posthtml-transform',
      transformIndexHtml(html) {
        return posthtml([
          textTransform({
            transform: 'capitalize', // 可选值：capitalize、lowercase、uppercase等，也支持自定义函数
            exclude: ['pre', 'code'] // 排除不需要处理的标签
          })
        ]).process(html).then(result => result.html);
      }
    }
  ]
};

3. 编辑器/IDE批量处理 #

使用编辑器插件可以快速批量处理现有HTML文件的文本：

• VS Code：安装「Change Case」插件，选中目标文本后，通过命令面板（Ctrl+Shift+P）选择「Change Case: Sentence Case」即可转换为句子首字母大写、其余小写的格式；也可配置工作区规则，自动对指定文件类型的文本进行转换。
• WebStorm：自带「Change Case」功能，右键选中文本即可选择对应的大小写转换选项。

内容的提问来源于stack exchange，提问作者zaouich