Trim and count mobile numbers in textarea field

Question

I have a textarea field in a form where I can copy paste (or type) mobile numbers. It will have one number per line, like this I can copy paste (or type) thousands of mobile numbers to submit in that form.
I want to trim that field, I only want 10 digit numbers to remain in that field after copy paste (or type).
Only valid 10 digit numbers should remain and all other invalid numbers should automatically remove from that field.
Example:
If I paste this numbers in this textarea field,

9848012345
9949123450
9949 123456
99491234
99491234561
+1236547890
9848098765

From this only 10 digit numbers should remain in field, like this:

9848012345
9949123450
9848098765

<form class="form" method="post" action="" enctype="multipart/form-data">
<div class="form-group row">
     <label for="title" class="col-lg-2 col-form-label">Mobile Numbers </label>                         
   <div class="col-lg-10">
     <textarea onKeyUp="countline()" type="text" class="form-control required" required 
cols="10" rows="7" id="mobileno" name="mobileno"> </textarea>
 </div>
</div>

<div class="form-group row">
     <label class="col-lg-2 control-label " for="userName">Number Count </label>
  <div class="col-lg-10">
      <input type="text" class="form-control " readonly id="numbercount" required name="numbercount" value="">
  </div>
 </div>

<div class="form-group row">
   <div class="col-lg-12 text-center">
     <button type="submit" name="submit" class="btn btn-success btn-lg waves-effect waves-light m-r-10">SUBMIT </button>
</div>
 </div>

</form>     

Using this script (onKeyUp="countline()") to count numbers (lines). Need to keep this also.

<script>
    function countline() {
        var length = $('#mobileno').val().split("\n").length;
        document.getElementById("numbercount").value = length;
    }
</script>

Tried this and working on adding a button as Validate. But, form submit action not working after adding this button for trim numbers.

const
  textArea = document.getElementById("mobileno"),
  validateEl = document.getElementById("validate");

validateEl.addEventListener("click", validate);

function validate(e) {  
  const filtered = textArea.value
    .split("\n")
    .filter(number => number.length === 10)
    .join("\n");

  textArea.value = filtered;
}

Any help please. Thanks in advance.

Answer 1

Regular expressions are for pattern matching.

... But as @Roko stated, it's not great to be editing and removing lines while the user may still be removing lines. You could run this code in a blur event, or use TextArea's pattern attribute to reject submission if format is bad

let tels = /\d{10}/g
let matches = ta.value.match(tels);
ta.value = "";
for (let i = 0; i < matches.length; i++) {
  ta.value+=matches[i] + "\n";
  console.log(matches[i]);
}

<textarea id="ta">
9848012345
9949123450
9949 123456
99491234
99491234561
+1236547890
9848098765
</textarea>

Answer 2

Per OP requirements. You can get an array of valid phone numbers with regex in one shot and without string manipulations.

• Modified to act onpaste
• Further modified to append pasted text to existing inputs

Caveats:

1. The regex expects one number per line, no leading whitespace, allows for trailing whitespace, and operates with regex global and multiline flags.
2. Not the best idea for "thousands of numbers", but should work so long as you don't exceed system limits
3. If you're going to enter as you type, you're probably better off implementing an input text field with strong validity checking and then appending the validated number to the <textarea> (assuming you're looking to copy the list of numbers afterward.)

function filterPhoneNumbers(e) {
  e.stopPropagation();
  e.preventDefault();

  let t = `${e.target.value}\n`;
  t += e.clipboardData.getData('Text');
  
  let ValidPhoneNumbers = t.match(/^\d{10}\s*?$/gm);

  e.target.value = ValidPhoneNumbers.join('\n');
}

textarea {
  width: 300px
}

<table>
  <tr>
    <td>
      <pre>Copy This:
      
9848012345 
9949123450 
9949 123456 
99491234 
99491234561 
+1236547890 
9848098765</pre>
    </td>
    <td>
      <textarea id="numbers" rows=10 
                placeholder="Paste Here"
                onpaste="filterPhoneNumbers(event)"></textarea>
    </td>
  </tr>
</table>