Trim white-spaces from all input fields using JavaScript

Question

Looking for pure JavaScript works specially in IE to remove all extra white-spaces from all inputs (text and textarea).

Here is the jQuery version that works but I want it in JavaScript:

function TrimText(el) {
 el.value = el.value.
 replace(/(^\s*)|(\s*$)/gi, ""). // removes leading and trailing spaces
 replace(/[ ]{2,}/gi, " "). // replaces multiple spaces with one space
 replace(/\n +/, "\n"); // removes spaces after newlines
 return;
}

What is best approach to convert this to JavaScript?

$j(function () {
 $j("textarea").change(function () {
    TrimText(this);
 });

 $j("input").change(function () {
    TrimText(this);
 });
});

Gokhan Kurt · Accepted Answer · 2021-01-20 10:30:26Z

1

If you want to apply this to all inputs currently in the page:

document.querySelectorAll('input, textarea').forEach(function(el) {
  el.addEventListener('change', function(ev) { TrimText(ev.target); });
});

If you want to apply it to all inputs currently in the page, and all inputs created in the future:

document.addEventListener('change', function (ev) {
  if(ev.target.tagName === 'INPUT' || ev.target.tagName === 'TEXTAREA')
    TrimText(ev.target);
});

This works by using a mechanism called bubbling. Events in Javascript bubble up through the DOM and finally reaches the document element. So, we listen to the events in the document element and filter the events by the tag name of the target.

This is how JQuery works internally, and this approach is applicable to other things you can do in JQuery.

answered Jan 20, 2021 at 10:30

Gokhan Kurt

8,3151 gold badge30 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deepak · Accepted Answer · 2021-01-20 10:54:40Z

0

Here's a simple JavaScript way as you asked. This removes every extra space, including leading and trailing spaces, and retains the single space.

Working demo:

function removeWhiteSpaces(){
    var value = document.getElementById("text").value;
    document.getElementById("text").value = value.replace(/\s+/g,' ').trim();
}

<input type="text" id="text" value="  I am  a bad    text"/>
<button onclick="removeWhiteSpaces()">Remove White Spaces</button>

answered Jan 20, 2021 at 10:54

Deepak

2,7522 gold badges13 silver badges31 bronze badges

Collectives™ on Stack Overflow

Trim white-spaces from all input fields using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related