How to tell if a string contains a certain character in JavaScript?
JavascriptStringJavascript Problem Overview
I have a page with a textbox where a user is supposed to enter a 24 character (letters and numbers, case insensitive) registration code. I used maxlength to limit the user to entering 24 characters.
The registration codes are typically given as groups of characters separated by dashes, but I would like for the user to enter the codes without the dashes.
How can I write my JavaScript code without jQuery to check that a given string that the user inputs does not contain dashes, or better yet, only contains alphanumeric characters?
Javascript Solutions
Solution 1 - Javascript
To find "hello" in your_string
if (your_string.indexOf('hello') > -1)
{
alert("hello found inside your_string");
}
For the alpha numeric you can use a regular expression:
Solution 2 - Javascript
With ES6 MDN docs .includes()
"FooBar".includes("oo"); // true
"FooBar".includes("foo"); // false
"FooBar".includes("oo", 2); // false
E: Not suported by IE - instead you can use the Tilde opperator ~ (Bitwise NOT) with .indexOf()
~"FooBar".indexOf("oo"); // -2 -> true
~"FooBar".indexOf("foo"); // 0 -> false
~"FooBar".indexOf("oo", 2); // 0 -> false
Used with a number, the Tilde operator effective does
~N => -(N+1). Use it with double negation !! (Logical NOT) to convert the numbers in bools:
!!~"FooBar".indexOf("oo"); // true
!!~"FooBar".indexOf("foo"); // false
!!~"FooBar".indexOf("oo", 2); // false
Solution 3 - Javascript
If you have the text in variable foo:
if (! /^[a-zA-Z0-9]+$/.test(foo)) {
// Validation failed
}
This will test and make sure the user has entered at least one character, and has entered only alphanumeric characters.
Solution 4 - Javascript
check if string(word/sentence...) contains specific word/character
if ( "write something here".indexOf("write som") > -1 ) { alert( "found it" ); }
Solution 5 - Javascript
ES6 contains inbuilt method (includes) in String's prototype, which can be used to check if string contains another string or not.
var str = 'To be, or not to be, that is the question.';
console.log(str.includes('To be'));
Following polyfill can be used to add this method in non-supported browsers. (Source)
if (!String.prototype.includes) {
String.prototype.includes = function(search, start) {
'use strict';
if (typeof start !== 'number') {
start = 0;
}
if (start + search.length > this.length) {
return false;
} else {
return this.indexOf(search, start) !== -1;
}
};
}
Solution 6 - Javascript
Use a regular expression to accomplish this.
function isAlphanumeric( str ) {
return /^[0-9a-zA-Z]+$/.test(str);
}
Solution 7 - Javascript
You're all thinking too hard. Just use a simple Regular Expression, it's your best friend.
var string1 = "Hi Stack Overflow. I like to eat pizza."
var string2 = "Damn, I fail."
var regex = /(pizza)/g // Insert whatever phrase or character you want to find
string1.test(regex); // => true
string2.test(regex); // => false
Solution 8 - Javascript
var inputString = "this is home";
var findme = "home";
if ( inputString.indexOf(findme) > -1 ) {
alert( "found it" );
} else {
alert( "not found" );
}
Solution 9 - Javascript
If you're searching for character(s) in the start or at the end of the string, you can also use startsWith and endsWith
const country = "pakistan";
country.startsWith('p'); // true
country.endsWith('n'); // true
Solution 10 - Javascript
To test for alphanumeric characters only:
if (/^[0-9A-Za-z]+$/.test(yourString))
{
//there are only alphanumeric characters
}
else
{
//it contains other characters
}
The regex is testing for 1 or more (+) of the set of characters 0-9, A-Z, and a-z, starting with the beginning of input (^) and stopping with the end of input ($).
Solution 11 - Javascript
Kevins answer is correct but it requires a "magic" number as follows:
var containsChar = s.indexOf(somechar) !== -1;
In that case you need to know that -1 stands for not found. I think that a bit better version would be:
var containsChar = s.indexOf(somechar) >= 0;
Solution 12 - Javascript
Try this:
if ('Hello, World!'.indexOf('orl') !== -1)
alert("The string 'Hello World' contains the substring 'orl'!");
else
alert("The string 'Hello World' does not contain the substring 'orl'!");
Here is an example: http://jsfiddle.net/oliverni/cb8xw/
Solution 13 - Javascript
String's search function is useful too. It searches for a character as well as a sub_string in a given string.
'apple'.search('pl') returns 2
'apple'.search('x') return -1
Solution 14 - Javascript
If you are reading data from the DOM such as a p or h1 tag, for example, you will want to use two native JavaScript functions, it is quiet easy but limited to es6, at least for the solution I am going to provide. I will search all p tags within the DOM, if the text contains a "T" the entire paragraph will be removed. I hope this little example helps someone out!
HTML
<p>Text you need to read one</p>
<p>Text you need to read two</p>
<p>Text you need to read three</p>
JS
let paras = document.querySelectorAll('p');
paras.forEach(p => {
if(p.textContent.includes('T')){
p.remove();
}
});
Solution 15 - Javascript
Working perfectly.This exmple will help alot.
<script>
function check()
{
var val = frm1.uname.value;
//alert(val);
if (val.indexOf("@") > 0)
{
alert ("email");
document.getElementById('isEmail1').value = true;
//alert( document.getElementById('isEmail1').value);
}else {
alert("usernam");
document.getElementById('isEmail1').value = false;
//alert( document.getElementById('isEmail1').value);
}
}
</script>
<body>
<h1>My form </h1>
<form action="v1.0/user/login" method="post" id = "frm1">
<p>
UserName : <input type="text" id = "uname" name="username" />
</p>
<p>
Password : <input type="text" name="password" />
</p>
<p>
<input type="hidden" class="email" id = "isEmail1" name = "isEmail"/>
</p>
<input type="submit" id = "submit" value="Add User" onclick="return check();"/>
</form>
</body>
Solution 16 - Javascript
You can use string.includes(). Example:
var string = "lorem ipsum hello world";
var include = "world";
var a = document.getElementById("a");
if (string.includes(include)) {
alert("found '" + include + "' in your string");
a.innerHTML = "found '" + include + "' in your string";
}
<p id="a"></p>
Solution 17 - Javascript
A sample regex pattern test you can use to find out if the string contains a character '@':
/(@[A-Za-z])\w+/.test(str_text)
Solution 18 - Javascript
Check if string is alphanumeric or alphanumeric + some allowed chars
The fastest alphanumeric method is likely as mentioned at: https://stackoverflow.com/questions/4434076/best-way-to-alphanumeric-check-in-javascript/25352300#25352300 as it operates on number ranges directly.
Then, to allow a few other extra chars sanely we can just put them in a Set for fast lookup.
I believe that this implementation will deal with surrogate pairs correctly correctly.
#!/usr/bin/env node
const assert = require('assert');
const char_is_alphanumeric = function(c) {
let code = c.codePointAt(0);
return (
// 0-9
(code > 47 && code < 58) ||
// A-Z
(code > 64 && code < 91) ||
// a-z
(code > 96 && code < 123)
)
}
const is_alphanumeric = function (str) {
for (let c of str) {
if (!char_is_alphanumeric(c)) {
return false;
}
}
return true;
};
// Arbitrarily defined as alphanumeric or '-' or '_'.
const is_almost_alphanumeric = function (str) {
for (let c of str) {
if (
!char_is_alphanumeric(c) &&
!is_almost_alphanumeric.almost_chars.has(c)
) {
return false;
}
}
return true;
};
is_almost_alphanumeric.almost_chars = new Set(['-', '_']);
assert( is_alphanumeric('aB0'));
assert(!is_alphanumeric('aB0_-'));
assert(!is_alphanumeric('aB0_-*'));
assert(!is_alphanumeric('你好'));
assert( is_almost_alphanumeric('aB0'));
assert( is_almost_alphanumeric('aB0_-'));
assert(!is_almost_alphanumeric('aB0_-*'));
assert(!is_almost_alphanumeric('你好'));
Tested in Node.js v10.15.1.
Solution 19 - Javascript
It's worked to me!
Attribute Contains Selector [name*=”value”]
This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value. Compare this selector with the Attribute Contains Word selector (e.g. [attr~="word"]), which is more appropriate in many cases.
source: Attribute Contains Selector [name*=”value”] => https://api.jquery.com/attribute-contains-selector/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>attributeContains demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">
<script>
$( "input[name*='man']" ).val( "has man in it!" );
</script>
</body>
</html>
Solution 20 - Javascript
The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.
const array1 = [1, 2, 3];
console.log(array1.includes(2));
// expected output: true
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
// expected output: true
console.log(pets.includes('at'));
// expected output: false
Solution 21 - Javascript
Demonstration: The include() method finds the “contains” character in whole string, it will return a true.
var string = "This is a tutsmake.com and this tutorial contains javascript include() method examples."
str.includes("contains");
//The output of this
true