如何在jQuery中实现字符串交替字符的大小写互转？

嘿，这个需求其实很容易实现～虽然jQuery本身没有内置专门处理交替字符大小写翻转的方法，但我们可以结合原生JS的字符串处理能力，轻松封装出符合jQuery使用习惯的功能。下面给你两种实用的方案：

方案一：通用处理函数（兼容jQuery场景） #

先写一个原生JS的通用函数，负责核心的字符串处理逻辑，之后可以在jQuery的代码中直接调用它：

function alternateCaseFlip(str, startWithFirst = true) {
  // 将字符串拆分为单个字符的数组
  return str.split('').map((char, index) => {
    // 判断当前字符是否处于需要翻转的交替位置
    // startWithFirst为true时，从第1个字符（索引0）开始交替翻转；false则从第2个字符（索引1）开始
    const shouldFlip = startWithFirst ? (index % 2 === 0) : (index % 2 === 1);
    if (!shouldFlip) return char;
    
    // 执行大小写互转：大写转小写，小写转大写
    return char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase();
  }).join(''); // 将处理后的字符数组重新拼接为字符串
}

在jQuery中使用这个函数 #

比如你要修改某个DOM元素的文本内容，就可以借助jQuery的text()方法（处理输入框用val()）的回调能力：

// 处理id为"target-text"的元素文本，从第一个字符开始交替翻转
$('#target-text').text(function(index, oldText) {
  return alternateCaseFlip(oldText);
});

// 处理输入框内容，从第二个字符开始交替翻转
$('#input-field').val(function(index, oldVal) {
  return alternateCaseFlip(oldVal, false);
});

方案二：封装成jQuery插件（更优雅的调用方式） #

如果你的项目中经常需要这个功能，把它封装成jQuery插件会更方便，调用起来更符合jQuery的风格：

// 注册jQuery插件
$.fn.alternateCaseFlip = function(startWithFirst = true) {
  // 遍历所有选中的元素
  return this.each(function() {
    const $element = $(this);
    // 根据元素类型获取原始内容（文本用text，输入框用val）
    const originalContent = $element.is('input, textarea') ? $element.val() : $element.text();
    
    // 执行核心的交替翻转逻辑
    const processedContent = originalContent.split('').map((char, index) => {
      const shouldFlip = startWithFirst ? (index % 2 === 0) : (index % 2 === 1);
      if (!shouldFlip) return char;
      return char === char.toUpperCase() ? char.toLowerCase() : char.toUpperCase();
    }).join('');
    
    // 将处理后的内容放回元素
    if ($element.is('input, textarea')) {
      $element.val(processedContent);
    } else {
      $element.text(processedContent);
    }
  });
};

使用插件的示例 #

// 给单个元素执行交替翻转（默认从第一个字符开始）
$('#target-text').alternateCaseFlip();

// 给多个元素执行交替翻转，并且从第二个字符开始
$('.text-block').alternateCaseFlip(false);

// 处理输入框内容
$('#username-input').alternateCaseFlip();

注意事项 #

• 对于非字母字符（比如数字、符号、空格），大小写翻转不会产生变化，函数会原样返回这些字符，不影响最终结果。
• 如果你需要自定义交替的规则（比如每3个字符翻转一次），只需要修改shouldFlip的判断逻辑即可，比如改成index % 3 === 0。

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