Trim and count mobile numbers in textarea field-CodePudding

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  method="post" action="" enctype="multipart/form-data">
<div >
     <label for="title" >Mobile Numbers </label>                         
   <div >
     <textarea onKeyUp="countline()" type="text"  required 
cols="10" rows="7" id="mobileno" name="mobileno"> </textarea>
 </div>
</div>

<div >
     <label  for="userName">Number Count </label>
  <div >
      <input type="text"  readonly id="numbercount" required name="numbercount" value="">
  </div>
 </div>

<div >
   <div >
     <button type="submit" name="submit" >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.

CodePudding user response：

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>

CodePudding user response：

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:

The regex expects one number per line, no leading whitespace, allows for trailing whitespace, and operates with regex global and multiline flags.
Not the best idea for "thousands of numbers", but should work so long as you don't exceed system limits
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>