Remove special characters from input field

Question

I've been searching everywhere but have been unable to find exactly what I am looking for.

I have an html form that is filled out with Mac addresses from our inventory so the strings inputted into the input field will look like:

A1:A2:A3:A4:A5:A6

I'm trying to write a script to remove the : character plus any spaces anywhere. That way when it is entered the output will be:

A1A2A3A4A5A6

This is what I have so far:

<input type="text" id="macaddress" onChange="removeChar();WriteLog();" />

Then in my script I have:

function removeChar() {
  var a = document.getElementById("macaddress").value;
  a = a.replace(/: /g, '');
  document.getElementById.innerHTML = a;
}

I don't get any JavaScript errors with this but nothing happens.

I also have another script that pulls the value of the field into a work log which is the other function WriteLog().

Essentially I want to remove the : then have the new value pulled into the log by the second function.

You have your regex as ": ", it should be ":" (no spaces). See: https://stackoverflow.com/a/6525002/2430549 — HoldOffHunger, Sep 18 '18 at 13:50
Possible duplicate of [Replacing a colon using string replace using Javascript and jQuery](https://stackoverflow.com/questions/6524982/replacing-a-colon-using-string-replace-using-javascript-and-jquery) — HoldOffHunger, Sep 18 '18 at 13:51

score 4 · Answer 1 · answered Sep 18 '18 at 13:56

4

If you want to keep only numbers and letts you can use this

a.replace(/[^a-zA-Z0-9]/g, '');

which basically replaces everything that isn't a-z or A-Z or 0-9 with an empty string.

A great tool for explaining regex and testing it is Regex101

And this line document.getElementById.innerHTML = a; should be fixed as well, you probably meant something like document.getElementById('some-elements-id').innerHTML = a;

answered Sep 18 '18 at 13:56

AwesomeGuy

1,059
9
28

`` works for me. – Cristian Sepulveda Oct 19 '19 at 16:47

score 3 · Accepted Answer · answered Sep 18 '18 at 13:53

3

Question spec says you want to remove : and : with space. Make the space in the regex optional:

a = a.replace(/:( )?/g, '');

But you also need to account for preceeding spaces:

a = a.replace(/( )?:( )?/g, '');

I would also trim the initial string (Just good practice)

a = a.trim().replace(/( )?:( )?/g, '');

Finally, I am not sure what this line does: document.getElementById.innerHTML = a;, but that line will throw an error. Remove it.

answered Sep 18 '18 at 13:53

S. Walker

2,129
12
30

1

Why do you suggest him to remove the last line, he probably needs it, just needs to fix it. – AwesomeGuy Sep 18 '18 at 13:58
1

Perfect the trim worked. I had to combine it with my first function to pull the data but it worked. Thank you – Michael Sep 18 '18 at 14:07

score 1 · Answer 3 · answered Sep 18 '18 at 13:58

1

to remove colons and spaces from string simply use

str = str.replace(/[:\s]/g, '');

answered Sep 18 '18 at 13:58

Yusuf Yalim

118
6

score 1 · Answer 4 · answered Sep 18 '18 at 14:08

HTML

<input type="text" id="macaddress"/>
<button onclick="removeChar()">Click me!</button>

JS

function removeChar() {
    var a = document.getElementById("macaddress").value.trim();
    a = a.split('');
    a.forEach(function (character, index) {
        if (character === ':') {
            a.splice(index, 1);
        }
    });
    a = a.join('');
    document.getElementById("macaddress").value  = a;
}

score 0 · Answer 5 · answered Sep 18 '18 at 14:11

Your Regex searches for "colon immediately followed by space".

If you add a pipe in between them: /:| /, then it will search for all colons and/or spaces, in any order.

Demo:

function removeChar() {
  var a = document.getElementById("macaddress").value;
  a = a.replace(/:| /g, '');
  document.getElementById("result").innerHTML = a;
}

<input type="text" id="macaddress" onChange="removeChar();" />
<div id="result"></div>

Remove special characters from input field

5 Answers5