使用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);
});

- michaelmcgurk

---

$('#last_name').val(this.value.toLowerCase().replace(/ /g, '')); 可以翻译为：“将输入框的值转换成小写，并且去除所有空格，然后将处理后的结果赋值给ID为'last_name'的输入框。” - Satpal

非常棒，@Satpal - 非常感谢 :-) - michaelmcgurk

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>

- Rory McCrossan

---

https://dev59.com/KHI-5IYBdhLWcg3wKVI9 是一个相当好的重复问题。 - mplungjan

非常感谢，Rory - 这个工作得很出色。以后的工作中知道这个工具会非常方便。 - michaelmcgurk

抱歉，如果我问得太晚了，我们可以在这里使用replaceAll(" ", "")方法代替正则表达式吗？请建议@Rory McCrossan。 - Sai kumar

@Saikumar 是的，现在它已经有足够好的支持了：https://caniuse.com/?search=replaceall。当最初回答这个问题时，情况并非如此。 - Rory McCrossan

谢谢回复。我现在明白了上下文。@RoryMcCrossan - Sai kumar

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);
});

- l.varga