Usually I would expect a String.contains()
method, but there doesn't seem to be one.
What is a reasonable way to check for this?
转载于:https://stackoverflow.com/questions/1789945/how-to-check-whether-a-string-contains-a-substring-in-javascript
Here is a list of current possibilities:
1. (ES6) includes
—go to answer
var string = "foo",
substring = "oo";
string.includes(substring);
2. ES5 and older indexOf
var string = "foo",
substring = "oo";
string.indexOf(substring) !== -1;
String.prototype.indexOf
returns the position of the string in the other string. If not found, it will return -1
.
3. search
—go to answer
var string = "foo",
expr = /oo/;
string.search(expr);
4. lodash includes—go to answer
var string = "foo",
substring = "oo";
_.includes(string, substring);
5. RegExp—go to answer
var string = "foo",
expr = /oo/; // no quotes here
expr.test(string);
6. Match—go to answer
var string = "foo",
expr = /oo/;
string.match(expr);
Performance tests are showing that indexOf
might be the best choice, if it comes to a point where speed matters.
var index = haystack.indexOf(needle);
Use a regular expression:
The problem with your code is that JavaScript is case sensitive. Your method call
indexof()
should actually be
indexOf()
Try fixing it and see if that helps:
if (test.indexOf("title") !=-1) {
alert(elm);
foundLinks++;
}
You need to call indexOf with a capital "O" as mentioned. It should also be noted, that in JavaScript class is a reserved word, you need to use className to get this data attribute. The reason it's probably failing is because it's returning a null value. You can do the following to get your class value...
var test = elm.getAttribute("className");
//or
var test = elm.className
You can easily add a contains
method to String with this statement:
String.prototype.contains = function(it) { return this.indexOf(it) != -1; };
Note: see the comments below for a valid argument for not using this. My advice: use your own judgement.
Alternatively:
if (typeof String.prototype.contains === 'undefined') { String.prototype.contains = function(it) { return this.indexOf(it) != -1; }; }
You could use the JavaScript search()
method.
Syntax is: string.search(regexp)
It returns the position of the match, or -1 if no match is found.
See examples there: jsref_search
You don't need a complicated regular expression syntax. If you are not familiar with them a simple st.search("title")
will do. If you want your test to be case insensitive, then you should do st.search(/title/i)
.
This just worked for me. It selects for strings that do not contain the term "Deleted:"
if (eventString.indexOf("Deleted:") == -1)
This piece of code should work well:
var str="This is testing for javascript search !!!";
if(str.search("for") != -1) {
//logic
}
A common way to write a contains
method in JavaScript is:
if (!String.prototype.contains) {
String.prototype.contains = function (arg) {
return !!~this.indexOf(arg);
};
}
The bitwise negation operator (~
) is used to turn -1
into 0
(falsey), and all other values will be non-zero (truthy).
The double boolean negation operators are used to cast the number into a boolean.
Another option of doing this is:
You can use the match function, that is, something like:
x = "teststring";
if (x.match("test")) {
// Code
}
match() can also work with regular expression :
x = "teststring";
if (x.match(/test/i)) {
// Code
}
There is a string.includes
in ES6:
"potato".includes("to");
> true
Note you may need to load es6-shim
or similar to get this working on older browsers.
require('es6-shim')
JavaScript code to use the contains
method in an array:
<html>
<head>
<h2>Use of contains() method</h2>
<script>
Array.prototype.contains = function (element) {
for (var i = 0; i < this.length; i++) {
if (this[i] == element) {
return true;
}
}
return false;
}
arr1 = ["Rose", "India", "Technologies"];
document.write("The condition is "+arr1.contains("India")+"<br>");
</script>
</head>
<b>[If the specified element is present in the array, it returns true otherwise
returns false.]</b>
</html>
In the given code the contains
method determines whether the specified element is present in the array or not. If the specified element is present in the array, it returns true, otherwise it returns false.
Since there is a complaint about using the prototype, and since using indexOf
makes your code less readable, and since regexp is overkill:
function stringContains(inputString, stringToFind) {
return (inputString.indexOf(stringToFind) != -1);
}
That is the compromise I ended up going for.
You were looking for .indexOf
MDN.
indexOf
is going to return an index to the matched substring. The index will correlate to where the substring starts. If there is no match, a -1 is returned. Here is a simple demo of that concept:
var str = "Hello World"; // For example, lets search this string,
var term = "World"; // for the term "World",
var index = str.indexOf(term); // and get its index.
if (index != -1) { // If the index is not -1 then the term was matched in the string,
alert(index); // and we can do some work based on that logic. (6 is alerted)
}
</div>
String.prototype.includes()
was introduced in ES6.
Determines whether one string may be found within another string, returning true or false as appropriate.
var contained = str.includes(searchString [, position]);
searchString
A string to be searched for within this string.
position
The position in this string at which to begin searching for searchString
defaults to 0.
var str = "To be, or not to be, that is the question.";
console.log(str.includes("To be")); // true
console.log(str.includes("question")); // true
console.log(str.includes("To be", 1)); // false
This may require ES6 shim in older browsers.
</div>
Since the question is pretty popular, I thought I could add a little modern flavor to the code.
// const : creates an immutable constant
const allLinks = document.getElementsByTagName("a");
// [].reduce.call : gives access to the reduce method on a HTMLCollection
// () => {} : ES6 arrow function
const foundLinks = [].reduce.call(allLinks, (sum, link) => {
// bitwise OR : converts the boolean value to a number
return sum + (link.classList.contains("title") | 0);
}, 0);
// template literal
console.log(`Found ${foundLinks || "no"} title class`);
BTW, the correct answer is misspelling indexOf
or the non-standard String.contains
. Loading an external library (especially if the code is written in pure JavaScript) or messing with String.prototype
or using a regular expression is a little overkill.
Instead of using code snippets found here and there on the web, you can also use a well-tested and documented library. Two Options I would recommend:
1st option: Use Lodash: It has an includes
method:
_.includes('foobar', 'ob');
// → true
Lodash is the most popular javascript library dependency for npm and has loads of handy javascript utility methods. So for many projects you would want this anyway ;-)
2nd option: Or use Underscore.string: It has an include
method:
_.str.include('foobar', 'ob');
// → true
Here is the description of Underscore.string, it just adds 9kb but gives you all the advantages a well-tested and documented library has over copy'n'paste code snippets:
Underscore.string is JavaScript library for comfortable manipulation with strings, extension for Underscore.js inspired by Prototype.js, Right.js, Underscore and beautiful Ruby language.
Underscore.string provides you several useful functions: capitalize, clean, includes, count, escapeHTML, unescapeHTML, insert, splice, startsWith, endsWith, titleize, trim, truncate and so on.
Note well, Underscore.string is influenced by Underscore.js but can be used without it.
Last not Least: With JavaScript version ES6 comes an built-in includes
method:
'foobar'.includes('ob');
// → true
Most modern browsers already support it, have an eye on the ES6 compatibility table.
Use the inbuilt and simplest one i.e match()
on the string. To achieve what you are looking forward do this:
var stringData ="anyString Data";
var subStringToSearch = "any";
// This will give back the substring if matches and if not returns null
var doesContains = stringData.match(subStringToSearch);
if(doesContains !=null) {
alert("Contains Substring");
}
If you were looking for an alternative to write the ugly -1 check, you prepend a ~ tilde instead.
if (~haystack.indexOf('needle')) alert('found');
Joe Zimmerman - you'll see that using ~ on -1 converts it to 0. The number 0 is a falsey value, meaning that it will evaluate to false when converted to a Boolean. That might not seem like a big insight at first, but remember functions like indexOf will return -1 when the query is not found. This means that instead of writing something similar to this:
if (someStr.indexOf("a") >= 0) { // Found it } else { // Not Found }
You can now have fewer characters in your code so you can write it like this:
if (~someStr.indexOf("a")) { // Found it } else { // Not Found }
More details here
ES6 contains String.prototype.includes
.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes
There is a sleek and better way to do this and it is using the (BitWise NOT) operator.
if(~"John".indexOf("J")) {
alert("Found")
}
else {
alert("Not Found");
}
The Bitwise Not converts "x" into -(x + 1) so, if the x turns out -1 from indexOf method.then it will be converted into -( -1 + 1) = -0 which is a falsy value .
JavaScript
var str = "My big string contain apples and oranges";
var n = str.indexOf("apples");
alert(n); //will alert 22, -1 if not found
jQuery
<p>My big string contain apples and oranges</p>
alert($("p:contains(apples)")[0] != undefined); //will alert true if found
To collect some kind of valid solutions:
var stringVariable = "some text";
var findString = "text";
//using `indexOf()`
var containResult1 = stringVariable.indexOf(findString) != -1;
document.write(containResult1+', ');
//using `lastIndexOf()`
var containResult2 = stringVariable.lastIndexOf(findString) != -1;
document.write(containResult2+', ');
//using `search()`
var containResult3 = stringVariable.search(findString) != -1;
document.write(containResult3+', ');
//using `split()`
var containResult4 = stringVariable.split(findString)[0] != stringVariable;
document.write(containResult4+'');
</div>
In ES5
var s = "foo";
alert(s.indexOf("oo") > -1);
In ES6 there are three new methods: includes()
, startsWith()
, endsWith()
.
var msg = "Hello world!";
console.log(msg.startsWith("Hello")); // true
console.log(msg.endsWith("!")); // true
console.log(msg.includes("o")); // true
console.log(msg.startsWith("o", 4)); // true
console.log(msg.endsWith("o", 8)); // true
console.log(msg.includes("o", 8)); // false
</div>
Simple workaround
if (!String.prototype.contains) {
String.prototype.contains= function() {
return String.prototype.indexOf.apply(this, arguments) !== -1;
};
}
you can use in the following way
"hello".contains("he") // true
"hello world".contains("lo w")//true
"hello world".contains("lo wa")//false
"hello world".contains(" ")//true
"hello world".contains(" ")//false
Example
var a = "Test String";
if(a.search("ring")!=-1){
//exist
} else {
//not found
}
String.prototype.indexOf()
or String.prototype.search()
?!As others have already mentioned, JavaScript strings have both an indexOf
and search
method.
The key difference between both, is that indexOf
is for plain substrings only, whereas search
also supports regular expressions. Of course, an upside of using indexOf
is that it's faster.
See also In JavaScript, what is the difference between indexOf() and search()?.
String.prototype.contains()
methodIf you want to add your own contains
method to every string, the best way to do it would be @zzzzBov's approach:
if (!String.prototype.contains) {
String.prototype.contains = function (arg) {
return !!~this.indexOf(arg);
};
}
You would use it like this:
'Hello World'.contains('orl');
It is generally frowned upon to add your own custom methods to standard objects in JavaScript, for example, because it might break forward compatibility.
If you really want your own contains
method and/or other custom string methods, it's better to create your own utility library and add your custom string methods to that library:
var helper = {};
helper.string = {
contains : function (haystack, needle) {
return !!~haystack.indexOf(needle);
},
...
};
You would use it like this:
helper.string.contains('Hello World', 'orl');
If you don't want to create your own custom helper library, there is - of course - always the option of using a third-party utility library. As mentioned by @nachtigall, the most popular ones are Lodash and Underscore.js.
In Lodash, you could use _.includes()
, which you use like this:
_.includes('Hello World', 'orl');
In Underscore.js, you could use _.str.include()
, which you use like this :
_.str.include('Hello World', 'orl');
In ES6, we have something calls includes which does exactly what you want: So you can simply do like this:
'str1'.includes('str2');
Also in ES5, if you widely use it, you can simply add it like this:
String.prototype.includes = String.prototype.includes || function(str) {
return this.indexOf(str) > -1;
}