How can I use JQuery's .filter() in this situation to select elements containing a non-case-sensitive string?

Question

My question ahead of time:

How can I filter out the elements that should match in a non-case-sensitive manner?

Related:

Answer to "jquery find element by text"

---

I'm writing a user-script to filter Spanish messages from showing up in an English chat room where Spanish users are beginning to talk often, and administrative action is not under my control.

Here's the DOM:

<div class="chat_message_window" style="height:366px">
    <div>
        <div>
            <p class=""><span username="TheEnigmaTNG" class="username chat_message_window_username">TheEnigmaTNG</span><span class="separator">: </span><span class="message hyphenate">del mejor se aprende gracias a luftangreifer el mejor para mi youtuber de contract si quieren busquenlo y suscribanse</span><span class="clear"></span>

            </p>
        </div>
        <div>
            <p class="even"><span username="TheEnigmaTNG" class="username chat_message_window_username">TheEnigmaTNG</span><span class="separator">: </span><span class="message hyphenate">se los recomiendo es ingles pero no importa</span><span class="clear"></span>

            </p>
        </div>
    </div>
</div>

And here's my code so far, which works perfectly with the issue of being case sensitive:

//to be filled with JQuery objects containing elements that contain 
//Spanish text
var matches = [];

//test elements for Spanish words
function test(elem, callback){
    var test = ['si','hola','de','es','bien','jaja','para','por','la','tu','qe','quien','alguien','en','soy','un','mucho','da','con','viva','mierda','cuenta','habre','vergas','ti','que','madre'];
    for (var i in test){
        var str = test[i];

        //this is the key - it finds everything lowercase but misses
        //non-lowercase words
        matches.push(elem.filter(":contains('" + str + "')"));
    }
    callback();
}

//run function each time the chat message window is updated
$('.chat_message_window').on('DOMSubtreeModified', function () {
    var messages = $(this).find('p').find('.message');
    test(messages, function(){
        console.log("Testing matches...");
        for (var i in matches){
            matches[i].parent().css("color","red");
        }
    });
});

//update DOM tree for testing
setTimeout(function(){
    $('.chat_message_window').append('<div>UPDATE!!!</div>');
},2000);

My goal is to make it not case sensitive.

I thought I could use .filter() with a function like so:

matches.push(elem.filter(function(){ return $(this).text() == str}));

But that isn't even close to right. Remember, elem is a JQuery object containing a group of elements.

How can I filter out the elements that should match in a non-case-sensitive manner?

Answer 1

Update :

//this is the key - it finds everything lowercase but misses
//non-lowercase words
    matches.push(elem.filter(":contains('" + str + "')"));

To :

//Checks if the jquery object's html, converted to all lower case contains the lowercase string.
// If it does, push the element into matches
if (elem.html().toLowerCase().indexOf(str) > -1) {
    matches.push(elem);
}

What that should do, is check the elements html, converted to lowercase, for your key strings.