使用Javascript去除空格并使字符串小写

Question

我有以下脚本将我在一个字段中输入的内容复制到另一个字段中。

演示：https://jsfiddle.net/wk3nmc76/

我想知道是否有可能将第二个字段更改为去除空格并使值小写？

<p><input type="text" name="full_name" id="full_name" placeholder="Full Name"/></p>
<p><input type="text" name="last_name" id="last_name"></p>

$('#full_name').keyup(function(){
   $('#last_name').val(this.value);
});

Answer 1

为此，

您可以使用toLowerCase()和正则表达式的组合来删除所有空格。试试这个：

$('#full_name').on('input', e => {
  $('#last_name').val(e.target.value.toLowerCase().replace(/s/g, ''));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<p>
  <input type="text" name="full_name" id="full_name" placeholder="Full Name" />
</p>
<p>
  <input type="text" name="last_name" id="last_name">
</p>

<小时 />

2023 更新

replaceAll()方法现在具有足够广泛的浏览器支持，使其成为使用正则表达式的可行替代方案：

$('#full_name').on('input', e => {
  $('#last_name').val(e.target.value.toLowerCase().replaceAll(' ', ''));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<p>
  <input type="text" name="full_name" id="full_name" placeholder="Full Name" />
</p>
<p>
  <input type="text" name="last_name" id="last_name">
</p>

Answer 2

$('#full_name').keyup(function(){
   $val = $(this).val()
   stripped_val = $val.replace(' ', '');
   lowercase_stripped_val = stripped_val.toLowerCase();
   $('#last_name').val(lowercase_stripped_val);
});

或者，简而言之：

$('#full_name').keyup(function(){
       $val = $(this).val()
       modified_val = $val.replace(' ', '').toLowerCase();
       $('#last_name').val(modified_val);
});