includes() not working in all browsers

Question

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.

includes is nothing to do with jQueery - the question is flawed :p — Jaromanda X
– Jaromanda X, Commented Jul 10, 2015 at 12:39
What version of jQuery are you using 1.x or 2.x? Also, I agree with Tushar - add the polyfill to your pages just incase other browsers do not support this feature. — user2417483
– user2417483, Commented Jul 10, 2015 at 12:46
The .includes() function has nothing to do with jQuery. .css() is a jQuery function and returns a string. .includes() is a function on the string object defined in ES6 which IE does not support. Your code is exactly the same as just doing "foo".includes("o"); without jQuery. — CodingWithSpike
– CodingWithSpike, Commented Jul 10, 2015 at 12:55

Tushar · Accepted Answer · 2015-07-10 12:59:13Z

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; }; }

Had to swap out my instances of .includes() for IE compatibility. I changed haystack.includes(needle) to haystack.indexOf(needle) !== -1 and it works on IE11.
In case someone need it, you can use this directly with a string: if (SomeString.indexOf("SubString") > -1) { //Somecode }

thiagoh · Accepted Answer · 2017-02-02 01:13:45Z

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; } }; }

For Angular 2+ users: use import 'core-js/es7/array' which has the correct polyfill, import 'core-js/es6/array' doesn't have 'includes'

César León · Accepted Answer · 2019-09-05 21:48:24Z

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.

Yogesh Saroya · Accepted Answer · 2020-06-15 10:29:07Z

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; } }); }

patz · Accepted Answer · 2020-07-23 21:56:26Z

0

import 'core-js/es7/array'

into polyfill.ts worked for me.

answered Jul 23, 2020 at 21:56

patz

1,3165 gold badges25 silver badges44 bronze badges

Collectives™ on Stack Overflow

includes() not working in all browsers

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Linked

Related