How to hide table rows containing certain keywords?

Question

When reading forums, I'd like to be able to have customizable keyword filters to hide certain rows.

For example on this forum, I'd like to hide any rows for certain usernames (3rd column).

Is it difficult to write a Greasemonkey script that could do this, only on this site?
Or is there a Firefox addon that does this kind of thing?

It would be easier to use adblock plus for this, do you have this addon? — Noitidart, Aug 01 '15 at 05:35

score 8 · Accepted Answer · edited Jun 20 '20 at 09:12

It is not hard to write a userscript to hide rows by keyword.

Suppose you had a table like this:

<table class="filterMe"> <tr>
        <th>Post</th>
        <th>Title</th>
        <th>Author</th>
    </tr> <tr>
        <td>1</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        <td>Fred</td>
    </tr> <tr>
        <td>2</td>
        <td>Fred speaks Greek!</td>
        <td>Ethel</td>
    </tr> <tr>
        <td>3</td>
        <td>You keep using that function. I do not think it does what you think it does.</td>
        <td>Inigo Montoya</td>
    </tr>
</table>

And you wanted to hide rows that contained Fred.
Using the awesome power of jQuery, you could do that with one line:

$(".filterMe tr:contains('Fred')").hide ();

If you wanted to restrict the match to the 3rd column (Author, in this case), you could use:

$(".filterMe td:nth-of-type(3):contains('Fred')").parent ().hide ();

Please note that :contains() is case-sensitive.

Online demo: (Show and run the code snippet.)

$("form").submit ( function (evt) {
    evt.preventDefault ();     //-- Stop normal form submit.
    $(".filterMe tr").show (); //-- Reset row display:

    var filterTerm      = $("#filterTxtInp").val ();
    var targJQ_Selector = ".filterMe td:nth-of-type(3):contains('" + filterTerm + "')";

    //-- Hide the desired rows.
    $(targJQ_Selector).parent ().hide ();
} );

table           { border-collapse: collapse; }
table, td, th   { border: 1px solid gray; }
td, th          { padding: 0.3ex 1ex;  text-align: left; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label>Filter Text:<input type="text" id="filterTxtInp" value="Fred"></label>
    <button type="submit">Filter rows</button>
</form>

<table class="filterMe"> <tr>
        <th>Post</th>  <th>Title</th>  <th>Author</th>
    </tr> <tr>
        <td>1</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
        <td>Fred</td>
    </tr> <tr>
        <td>2</td>
        <td>Fred speaks Greek!</td>
        <td>Ethel</td>
    </tr> <tr>
        <td>3</td>
        <td>You keep using that function. I do not think it does what you think it does.</td>
        <td>Inigo Montoya</td>
    </tr>
</table>

Use this in a userscript, like so:

// ==UserScript==
// @name     _Hide Table Rows by keyword
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
$(".filterMe td:nth-of-type(3):contains('Fred')").parent ().hide ();

IMPORTANT: You need to replace .filterMe with a valid selector for your site. Use tools like Firebug to help you determine a unique jQuery selector for your desired table.
Also alter the nth-of-type() index as needed.

Or, for an AJAX-driven site:

// ==UserScript==
// @name     _Hide Table Rows by keyword
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
waitForKeyElements (
    ".filterMe td:nth-of-type(3):contains('Fred')", hideTargetdRow
);

function hideTargetdRow (jNode) {
    jNode.parent ().hide ();
}

For multiple keywords:

// ==UserScript==
// @name     _Hide Table Rows by keyword
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
var keywords    = [
    "Apple",
    "existentialism"
];
var keyW_Regex  = new RegExp (keywords.join('|'), "i"); //-- The "i" makes it case insensitive.

waitForKeyElements (
    ".filterMe td:nth-of-type(3)", hideTargetedRowAsNeeded
);

function hideTargetedRowAsNeeded (jNode) {
    if (keyW_Regex.test (jNode.text () ) ) {
        jNode.parent ().hide ();
    }
}

Wow thanks for the awesome answer! How do I make it so it only acts on one specific site, is that what the @include is? — tbone, Aug 01 '15 at 22:11
Yes, you must adjust your `@include` directive(s) to match the site(s) or page(s) you are interested in. — Brock Adams, Aug 01 '15 at 22:34

How to hide table rows containing certain keywords?

1 Answers1

Online demo: (Show and run the code snippet.)

Use this in a userscript, like so:

Or, for an AJAX-driven site:

For multiple keywords:

Linked