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.

I find it odd that the great leveller, jQueery, fails to bring all browsers down to the lowest common denominator - if `includes` doesn't work in IE, it shouldn't work in any browser — Jaromanda X, Jul 10 '15 at 12:36
[includes()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) not stable function in cross browsers — Girish, Jul 10 '15 at 12:38
includes is nothing to do with jQueery - the question is flawed :p — Jaromanda X, Jul 10 '15 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. — , Jul 10 '15 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, Jul 10 '15 at 12:55

Tushar · Accepted Answer · 2015-07-10T12:59:13.697

133

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

edited Jul 10 '15 at 12:59

answered Jul 10 '15 at 12:33

Tushar

85,780
21
159
179

6

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. – KillahB Jul 19 '17 at 01:52
In case someone need it, you can use this directly with a string: if (SomeString.indexOf("SubString") > -1) { //Somecode } – César León Sep 26 '19 at 20:28

score 11 · Answer 2 · answered Feb 02 '17 at 01:13

11

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

answered Feb 02 '17 at 01:13

thiagoh

7,098
8
51
77

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' – Paul A. Trzyna May 26 '20 at 14:41

score 4 · Answer 3 · answered Sep 05 '19 at 21:48

4

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.

answered Sep 05 '19 at 21:48

César León

2,941
1
21
18

score 1 · Answer 4 · answered Jun 15 '20 at 10:29

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

score 0 · Answer 5 · answered Jul 23 '20 at 21:56

0

import 'core-js/es7/array'

into polyfill.ts worked for me.

answered Jul 23 '20 at 21:56

patz

1,306
4
25
42

includes() not working in all browsers

5 Answers5

Linked

Related