Strip spaces and make string lowercase with Javascript [duplicate]

Question

I have the following script that duplicates the content I'm entering in one field into another.

DEMO: https://jsfiddle.net/wk3nmc76/

I was wondering if it's possible I could change the 2nd field to strip spaces & make the value lowercase?

<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

To achieve this you can use a combination of toLowerCase() and a regular expression to remove all the spaces. Try this:

$('#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 Update

The replaceAll() method now has broad enough browser support for it to be a viable alternative to using a Regular Expression:

$('#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>