Browser support for array.includes and alternatives

Question

I looked it up and found this regarding finding a substring in a larger string in an array. Array.Prototype.includes

if (t.title.includes(searchString)) 

My t is part of a $.each that's iterating through a larger array of objects (each objects got a buttload of info, from strings, dates and such). searchString is whatever the user typed in a box. All this is a simple search function for a list I have on the page.

This works just fine in Chrome. But Firefox and IE are turning up errors stating

TypeError: currentTicket.title.includes is not a function 

So I either put up a warning sign that my app only works on Chrome or I handcraft a find function? Weird thing is the doc page from MDN I posted states that only Firefox supports the array.includes, strangely enough it's only Chrome that runs it.

Answer 1

Instead of using an API that is currently marked as "experimental" consider using a more broadly supported method, such as Array.prototype.indexOf() (which is also supported by IE).

Instead of t.title.includes(string) you could use t.title.indexOf(string) >= 0

You can also use Array.prototype.filter() to get a new array of strings that meet a certain criteria, as in the example below.

var arr = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"];  document.getElementById("input").onkeyup = function() {    document.getElementById("output").innerHTML = arrayContainsString(arr,this.value);  }  document.getElementById("header").innerHTML = JSON.stringify(arr);    function arrayContainsString(array, string) {    var newArr = array.filter(function(el) {      return el.indexOf(string) >= 0;    });    return newArr.length > 0;  }

<input id="input" type="text" />  <br/>  <div>array contains text:<span id="output" />  </div>  <div id="header"></div>