includes() not working in all browsers
Solution 1
If you look at the documentation of includes()
, most of the browsers don't support this property.
You can use widely supported indexOf()
after converting the property to string using toString()
:
if ($(".right-tree").css("background-image").indexOf("stage1") > -1) {
// ^^^^^^^^^^^^^^^^^^^^^^
You can also use the polyfill from MDN.
if (!String.prototype.includes) {
String.prototype.includes = function() {
'use strict';
return String.prototype.indexOf.apply(this, arguments) !== -1;
};
}
Solution 2
IE11 does implement String.prototype.includes so why not using the official Polyfill?
Source: polyfill source
if (!String.prototype.includes) {
String.prototype.includes = function(search, start) {
if (typeof start !== 'number') {
start = 0;
}
if (start + search.length > this.length) {
return false;
} else {
return this.indexOf(search, start) !== -1;
}
};
}
Solution 3
In my case i found better to use "string.search".
var str = "Some very very very long string";
var n = str.search("very");
In case it would be helpful for someone.
Solution 4
Here is solution ( ref : https://www.cluemediator.com/object-doesnt-support-property-or-method-includes-in-ie )
if (!Array.prototype.includes) {
Object.defineProperty(Array.prototype, 'includes', {
value: function (searchElement, fromIndex) {
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
// 1. Let O be ? ToObject(this value).
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If len is 0, return false.
if (len === 0) {
return false;
}
// 4. Let n be ? ToInteger(fromIndex).
// (If fromIndex is undefined, this step produces the value 0.)
var n = fromIndex | 0;
// 5. If n ≥ 0, then
// a. Let k be n.
// 6. Else n < 0,
// a. Let k be len + n.
// b. If k < 0, let k be 0.
var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
function sameValueZero(x, y) {
return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
}
// 7. Repeat, while k < len
while (k < len) {
// a. Let elementK be the result of ? Get(O, ! ToString(k)).
// b. If SameValueZero(searchElement, elementK) is true, return true.
if (sameValueZero(o[k], searchElement)) {
return true;
}
// c. Increase k by 1.
k++;
}
// 8. Return false
return false;
}
});
}
Christian4423
Updated on July 24, 2020Comments
-
Christian4423 almost 4 years
right here is a block of my code. It works perfect in fireFox and Chrome. But not in IE. I get the error "
Object doesn't support property or method 'includes'
"function rightTreeSwapfunc2() { if ($(".right-tree").css("background-image").includes("stage1") == true) { $(".right-tree").css({ backgroundImage: "url(/plant-breeding/img/scenes/plant-breeding/stage5.jpg)" }) } else { $(".right-tree").css({ backgroundImage: "url(/plant-breeding/img/scenes/plant-breeding/stage3.jpg)" }) } }
I could change it up a bit and use vanilla JS and do:
document.getElementById("right-tree").classList.contains
But I would rather see if there is a way to get it to work in IE before changing the JS and editing the HTML and CSS.
-
KillahB almost 7 yearsHad to swap out my instances of
.includes()
for IE compatibility. I changedhaystack.includes(needle)
tohaystack.indexOf(needle) !== -1
and it works on IE11. -
César León over 4 yearsIn case someone need it, you can use this directly with a string: if (SomeString.indexOf("SubString") > -1) { //Somecode }
-
Paul A. Trzyna almost 4 yearsFor Angular 2+ users: use import 'core-js/es7/array' which has the correct polyfill, import 'core-js/es6/array' doesn't have 'includes'