How to Remove Numbers From a String With Javascript
JavaScript is a client-side scripting language that typically is used to create dynamic Web pages. One of JavaScript's advantages is its extensive library of built-in functions and objects that Web programmers can use to create, manipulate and store text as strings. JavaScript programmers can use a string's properties, such as the length property; use a string's methods, such as split and splice; and access HTML wrapper methods that return strings with HTML tags. JavaScript also has functions that allow programmers to search strings, change a string's case and remove specific characters from strings.
Other People Are Reading
Instructions
-
-
1
Open a text editor and create a new file named "noNums.html." Add the basic HTML tags to the file:
<html>
<head></head>
<body></body>
</html>
-
2
Add a "<script>" tag between the file's "<head>" and "</head>" tags, set the "<script>" tag's "type" attribute to "text/javascript" and close the "</script>" tag.
<html>
<head>
<script type="text/javascript">
</script>
</head>
<body></body>
</html>
-
-
3
Add a JavaScript function named "numbersOnly" between the file's "<script>" and "</script>" tags. The "numbersOnly" function takes no arguments. Add an open curly brace ("{") and a close curly brace ("}") after the function declaration to hold the place for the function's code.
<html>
<head>
<script type="text/javascript">
function numbersOnly()
{
}
</script>
</head>
<body></body>
</html>
-
4
Retrieve the string value of an input field with the ID "inputValue" using the JavaScript "getElementById" function. Save the string value to a variable named "inputStr".
<html>
<head>
<script type="text/javascript">
function numbersOnly()
{
inputStr = document.getElementById('inputValue').value;
}
</script>
</head>
<body></body>
</html>
-
5
Use the JavaScript "replace" function to replace all of the numbers ("0-9") in the "inputStr" variable with a null character (' '). Save the results of the "replace" function to a variable named "upperStr".
<html>
<head>
<script type="text/javascript">
function numbersOnly()
{
inputStr = document.getElementById('inputValue').value;
upperStr = inputStr.replace(/[0-9]+/g,'');
}
</script>
</head>
<body></body>
</html>
-
6
Write the value of the variable "upperStr" to the "inputValue" input field using the JavaScript "getElementById" function.
<html>
<head>
<script type="text/javascript">
function numbersOnly()
{
inputStr = document.getElementById('inputValue').value;
upperStr = inputStr.replace(/[0-9]+/g,'');
document.getElementById('inputValue').value = upperStr;
}
</script>
</head>
<body></body>
</html>
-
7
Add an HTML "<input>" field between the file's "<body>" and "</body>" tags. Give the input field the ID "inputValue" and the text "1234567abcdefg89hij". The "<input>" HTML tag does not require a close "</input>" tag.
<html>
<head>
<script type="text/javascript">
function numbersOnly()
{
inputStr = document.getElementById('inputValue').value;
upperStr = inputStr.replace(/[0-9]+/g,'');
document.getElementById('inputValue').value = upperStr;
}
</script>
</head>
<body>
<input id="inputValue" value="1234567abcdefg89hij"></body>
</html>
-
8
Add an HTML "<button>" tag between the "<body>" and "</body>" tags. Use an "onClick()" event to call the "numbersOnly" function and replace the value in the "inputValue" input field to a value that contains no numbers. Give the button the text "Click to Remove the Numbers from the String" and close the "</button>" tag.
<html>
<head>
<script type="text/javascript">
function numbersOnly()
{
inputStr = document.getElementById('inputValue').value;
upperStr = inputStr.replace(/[0-9]+/g,'');
document.getElementById('inputValue').value = upperStr;
}
</script>
</head>
<body>
<input id="inputValue" value="1234567abcdefg89hij"></body>
<button onclick='numbersOnly()'>Click to remove the numbers from the string</button>
</html>
-
9
Open noNums.html in a Web browser. Click the "Click to remove the numbers from the string" button and verify that the string updates in the "inputValue" input field with no numbers. Type a different string in the input field and click the button.
-
1
Tips & Warnings
Strings can be "added" using the JavaScript concatenation operator ("+") or by using the concat() string method.
When declaring and manipulating JavaScript strings, use single (') or double (") quotes to indicate the string's text.
String functions can be executed using dot notation.
Be sure to use the "\" character to escape single and double quotes used in a string's text.
References
Resources
- Photo Credit BananaStock/BananaStock/Getty Images
