Contiene mayúsculas y minúsculas

Tengo lo siguiente:

if (referrer.indexOf("Ral") == -1) { ... }

Lo que me gusta hacer es Ralsensible a mayúsculas, por lo que puede ser RAl, rAl, etc y todavía igualar.

¿Hay alguna manera de decir que Raltiene que ser sensible a mayúsculas y minúsculas?

Añadir .toLowerCase()después referrer. Este método convierte la cadena en una cadena minúscula. Luego, use .indexOf()usando en rallugar de Ral.

if (referrer.toLowerCase().indexOf("ral") === -1) { 

Lo mismo también se puede lograr usando una Expresión regular (especialmente útil cuando se quiere probar contra patrones dinámicos):

if (!/Ral/i.test(referrer)) {
   //    ^i = Ignore case flag for RegExp

Otra opción es utilizar el método de búsqueda de la siguiente manera:

if (referrer.search(new RegExp("Ral", "i")) == -1) { ...

Se ve más elegante luego de convertir toda la cadena a minúsculas y puede ser más eficiente.
Con toLowerCase()el código tiene dos pasadas sobre la cadena, una pasa en toda la cadena para convertirla a minúsculas y otra es buscar el índice deseado.
Con RegExpel código, pase una vez sobre la cadena que parece coincidir con el índice deseado.

Por lo tanto, en cadenas largas, recomiendo usar la RegExpversión (supongo que en cadenas cortas esta eficiencia se debe a la creación del RegExpobjeto)

Use un RegExp:

if (!/ral/i.test(referrer)) {
    ...
}

O use .toLowerCase():

if (referrer.toLowerCase().indexOf("ral") == -1)

Desde ES2016 también puede usar un método ligeramente mejor / más fácil / más elegante (distingue entre mayúsculas y minúsculas):

if (referrer.includes("Ral")) { ... }

o (sin distinción entre mayúsculas y minúsculas):

if (referrer.toLowerCase().includes(someString.toLowerCase())) { ... }

Aquí hay alguna comparación de .indexOf()y .includes(): https://dev.to/adroitcoder/includes-vs-indexof-in-javascript

Hay un par de enfoques aquí.

Si desea realizar una comprobación sin distinción entre mayúsculas y minúsculas solo para esta instancia, haga algo como lo siguiente.

if (referrer.toLowerCase().indexOf("Ral".toLowerCase()) == -1) {
    ...

Alternativamente, si realiza esta comprobación regularmente, puede agregar un nuevo indexOf()método similar String, pero no distingue entre mayúsculas y minúsculas.

String.prototype.indexOfInsensitive = function (s, b) {
    return this.toLowerCase().indexOf(s.toLowerCase(), b);
}

// Then invoke it
if (referrer.indexOfInsensitive("Ral") == -1) { ...

if (referrer.toUpperCase().indexOf("RAL") == -1) { ...

Puedes probar esto

str = "Wow its so COOL"
searchStr = "CoOl"

console.log(str.toLowerCase().includes(searchStr.toLowerCase()))

Ejemplo para cualquier idioma:

'My name is Хведор'.toLocaleLowerCase().includes('ХвЕдОр'.toLocaleLowerCase())

Es 2016, ¿y no hay una forma clara de cómo hacer esto? Esperaba un poco de copypasta. Voy a intentarlo

Notas de diseño: quería minimizar el uso de memoria y, por lo tanto, mejorar la velocidad, por lo que no hay copia / mutación de cadenas. Supongo que V8 (y otros motores) pueden optimizar esta función.

//TODO: Performance testing
String.prototype.naturalIndexOf = function(needle) {
    //TODO: guard conditions here

    var haystack = this; //You can replace `haystack` for `this` below but I wan't to make the algorithm more readable for the answer
    var needleIndex = 0;
    var foundAt = 0;
    for (var haystackIndex = 0; haystackIndex < haystack.length; haystackIndex++) {
        var needleCode = needle.charCodeAt(needleIndex);
        if (needleCode >= 65 && needleCode <= 90) needleCode += 32; //ToLower. I could have made this a function, but hopefully inline is faster and terser
        var haystackCode = haystack.charCodeAt(haystackIndex);
        if (haystackCode >= 65 && haystackCode <= 90) haystackCode += 32; //ToLower. I could have made this a function, but hopefully inline is faster and terser

        //TODO: code to detect unicode characters and fallback to toLowerCase - when > 128?
        //if (needleCode > 128 || haystackCode > 128) return haystack.toLocaleLowerCase().indexOf(needle.toLocaleLowerCase();
        if (haystackCode !== needleCode)
        {
            foundAt = haystackIndex;
            needleIndex = 0; //Start again
        }
        else
            needleIndex++;

        if (needleIndex == needle.length)
            return foundAt;
    }

    return -1;
}

Mi razón para el nombre:

• Debería tener IndexOf en el nombre
• No agregue un sufijo - Of se refiere al siguiente parámetro
• No use "caseInsensitive" que es muuuy largo
• "natural" es un buen candidato, porque las comparaciones por mayúsculas y minúsculas por defecto no son naturales para los humanos en primer lugar.

Por qué no...:

• toLowerCase() - posibles llamadas repetidas a toLowerCase en la misma cadena.
• RegExp- incómodo para buscar con variable. Incluso el objeto RegExp es incómodo al tener que escapar de los personajes

Para hacer una mejor búsqueda, use el siguiente código,

var myFav   = "javascript";
var theList = "VB.NET, C#, PHP, Python, JavaScript, and Ruby";

// Check for matches with the plain vanilla indexOf() method:
alert( theList.indexOf( myFav ) );

// Now check for matches in lower-cased strings:
alert( theList.toLowerCase().indexOf( myFav.toLowerCase() ) );

En la primera alerta (), JavaScript devolvió "-1"; en otras palabras, indexOf () no encontró una coincidencia: esto se debe simplemente a que "JavaScript" está en minúscula en la primera cadena y se escribe correctamente en mayúscula en la segunda. Para realizar búsquedas que no distinguen entre mayúsculas y minúsculas con indexOf (), puede hacer que ambas cadenas sean mayúsculas o minúsculas. Esto significa que, como en la segunda alerta (), JavaScript solo verificará la aparición de la cadena que está buscando, se ignoraron las mayúsculas.

Referencia, http://freewebdesigntutorials.com/javaScriptTutorials/jsStringObject/indexOfMethod.htm

Si referreres una matriz, puede usarfindIndex()

 if(referrer.findIndex(item => 'ral' === item.toLowerCase()) == -1) {...}

Aquí está mi opinión:

Guión :

var originalText = $("#textContainer").html()
$("#search").on('keyup', function () {
  $("#textContainer").html(originalText)
  var text = $("#textContainer").html()
  var val = $("#search").val()
  if(val=="") return;
  var matches = text.split(val)
  for(var i=0;i<matches.length-1;i++) {
    var ind =  matches[i].indexOf(val)
    var len = val.length
      matches[i] = matches[i] + "<span class='selected'>" + val + "</span>"
  }
  $("#textContainer").html(matches.join(""))

HTML:

<input type="text" id="search">
<div id="textContainer">
lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of letraset sheets containing lorem ipsum passages, and more recently with desktop publishing software like Aldus pagemaker including versions of lorem ipsum.</div>

Codepen