如何用JavaScript/jQuery将CSS全大写标题中iDEV的首字母i改为小写

可以实现，以下是具体实现方案：

实现原理 #

你当前全站通过CSS的text-transform: uppercase属性将标题统一转为全大写，会把原始的iDev自动转为IDEV。我们只需要匹配到所有标题里的IDEV字符串，将首字母i包裹在单独的标签中，设置其文本转换规则为小写，即可得到iDEV的展示效果。

原生JavaScript实现 #

// 可根据实际业务调整选择器，比如仅选择带.title类的标题
const titleElements = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

titleElements.forEach(title => {
  // 全局匹配所有IDEV字样，替换为带自定义样式的结构
  title.innerHTML = title.innerHTML.replace(/IDEV/g, '<span style="text-transform: lowercase">i</span>DEV');
});

你也可以把样式抽为公共CSS类，方便统一维护：

.lowercase-first {
  text-transform: lowercase;
}

替换时直接用类名即可：

title.innerHTML = title.innerHTML.replace(/IDEV/g, '<span class="lowercase-first">i</span>DEV');

jQuery实现 #

$(document).ready(function() {
  // 选择所有标题元素，可按需调整选择器
  $('h1, h2, h3, h4, h5, h6').each(function() {
    $(this).html($(this).html().replace(/IDEV/g, '<span class="lowercase-first">i</span>DEV'));
  });
});

注意事项 #

• 如果标题内包含已绑定交互事件的子元素，直接替换innerHTML会导致事件丢失，这种场景建议单独处理文本节点，不要全量替换HTML内容。
• 正则表达式末尾的g修饰符不可省略，用于匹配同一个标题中多次出现的IDEV字符串。
• 若可直接修改原始HTML内容，优先直接修改结构，无需额外执行JS，性能最优。

内容的提问来源于stack exchange，提问作者Juan Pablo Madrid