Question

有没有办法生成这样的输出，第一个字母是大写，第二个是小的，第三个是大写，第四个是小的，依此类推：

输入＃输入代码：此stackoverflow.com

输出＃您已输入： ThIs StAcKoVeRfLoW.CoM

以下是我到目前为止尝试过的片段。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Enter Code: <input type="text" name="code" id="code">
<br>
You have enterd : <lable id="outcode"></lable>

arrange_()

注意：这不是单词的大写，它是字符的基础

Answer 1

-B | --batch-mode

release

Answer 2

＆＃13;

$("#code").keyup(function(){
  
  var finalCode=$("#code").val();
  for($i=0;$i<=finalCode.length;$i++){
   // finalCode=finalCodeprev[i].toUpper();
    $("#outcode").html(finalCode);  
  }
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Enter Code: <input type="text" name="code" id="code">
<br>
You have enterd : <lable id="outcode"></lable>

＆＃13;

<style>
#outcode{
text-transform: capitalize;

}

</style>

Answer 3

使用 String#replace 方法做一些棘手的事情

$("#code").on('input', function() {
  var i = 0;
  $("#outcode").html(
    // match all non-space character and replace it with 
    // value of i is odd or even
    this.value.replace(/\S/ig, function(m) {
      // check value is even and increment value ofi
      if (i++ % 2 == 0)
        // convert to upper case
        m = m.toUpperCase();
      // return the replca text
      return m;
    })
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Enter Code:
<input type="text" name="code" id="code">
<br>You have enterd :
<lable id="outcode"></lable>

Answer 4

我建议使用简单的String和Array方法，而不是使用正则表达式：

function alternateCapitals() {
  // retrieving the <input> element's value:
  var text = this.value
             // removing the leading, and trailing, white-space:
             .trim()
             // splitting the String into an Array, with each
             // array-element being a single-character:
             .split('')
             // using Array.prototype.map() to return a
             // modified version of the original characters:
             .map(function(char, index) {
               // char: the first argument, is the current
               // array-element of the array over which
               // we're iterating;
               // index: the second arguement, is the index
               // of the current array-element in the array
               // over which we're iterating.

    // if the remainder of the index divided by 2 is zero we
    // return the character in upper-case, otherwise we return
    // the character in lowercase:
    return index % 2 === 0 ? char.toUpperCase() : char.toLowerCase();

  // we join the Array of characters back together into a string,
  // using Array.prototype.join():
  }).join('');

  // setting the text of the '#outcode' element:
  $('#outcode').text(text);
}

$("#code").keyup(alternateCapitals);

＆＃13;

function alternateCapitals() {
  var text = this.value.trim().split('').map(function(char, index) {
    return index % 2 === 0 ? char.toUpperCase() : char.toLowerCase();
  }).join('');
  $('#outcode').text(text);
}

$("#code").keyup(alternateCapitals);

＆＃13;

label {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>Enter Code:
  <input type="text" name="code" id="code">
</label>
You have entered:
<span id="outcode"></span>

＆＃13;

JS Fiddle demo

参考文献：

JavaScript的：
- Array.prototype.join()。
- Array.prototype.map()。
- String.prototype.split()。
- String.prototype.trim()。
jQuery的：
- text()。

如何使用jquery更改大写和小序列中的字符大小写

4 个答案: