如何为text-transform: capitalize规则设置特定单词的大小写例外

问题原因 #

你的代码无法生效主要有3个核心问题：

1. 判断逻辑错误：String.includes()返回的是布尔类型的true/false，你用=== 'true'和字符串比较，判断条件永远不会成立
2. 字符串不可变：JS中字符串是原始值类型，replace()方法不会修改原字符串，只会返回替换后的新字符串，你没有将替换结果赋值回输入框的value，修改不会生效
3. CSS属性冲突：text-transform: capitalize是纯视觉样式，只会修改页面显示效果，不会改变输入框实际存储的value值；同时就算你把value里的Of改成of，CSS还是会强制显示为Of，达不到你要的显示效果

正确实现方案 #

建议直接放弃CSS的text-transform属性，完全通过JS控制大小写转换，后续新增例外词也更方便：

第一步：调整HTML代码 #

删除input标签style中的text-transform: capitalize属性，同时在keyup事件中新增大小写处理逻辑：

<div style="display: flex;align-items:center; width: 400px; justify-content: space-between ;  max-width: 100%;">
    <p style="margin: 10px 0">Title</p>
    <input type="text" id="titleInput" style="width: 300px;"
        onkeyup="formatTitle('titleInput'); getIputValue(`titleInput`, `title`)" />
</div>

第二步：编写大小写处理函数 #

预定义小写例外词数组，后续要加the/and之类的例外直接往数组里加即可，不用重复写if判断：

// 配置所有需要保持小写的单词
const LOWERCASE_EXCEPTIONS = ['of']

function formatTitle(inputId) {
    const inputEl = document.getElementById(inputId)
    // 先把输入内容转成全小写再拆分单词
    const words = inputEl.value.toLowerCase().split(' ')
    const formattedWords = words.map(word => {
        // 例外词直接返回小写
        if (LOWERCASE_EXCEPTIONS.includes(word)) return word
        // 普通单词首字母大写
        return word.charAt(0).toUpperCase() + word.slice(1)
    })
    // 把处理后的内容赋值回输入框
    inputEl.value = formattedWords.join(' ')
}

如果你的需求只是实际提交的value值正确，不需要调整页面显示效果，也可以保留CSS的text-transform属性，只在表单提交前调用上述formatTitle函数处理输入值即可。

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