Utilizing grease/tampermonkey (or any other browser extension) to filter out specific characters within webpage elements

Question

Utilizing grease/tampermonkey (or any other browser extension) to filter out specific characters within webpage elements

Forgive me if my language is not accurate, as I am still learning about programming. The forum that I visit has cluttered the page with unnecessary and glitchy images and text for a promotion. This has made the forum difficult to navigate. I was successful in blocking most of it using adblock, but there remains a piece that appears within the forum elements themselves, causing AdBlock to want to remove the entire element (and consequently breaking the forum). Here is a snippet of the problematic code with edited URLs:

<td class="windowbg" valign="middle" width="42%">&blk34;&blk34;&blk34;&blk34;&blk34;
        <a href="http://www.example.com">Thread title</a>  <span class="smalltext"></span><img src="example.com/forumicon.gif"></td>

As you can observe, the ▓ character inexplicably appears multiple times. Is there a way to instruct my browser to ignore this character when it is contained within an element? I have not been able to discern a method of achieving this using AdBlock.

javascript css

Answer 1

Answer №1

One way to achieve this is by utilizing a NodeIterator:

var iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_TEXT);
var currentNode;
while (currentNode = iterator.nextNode()) {
    currentNode.textContent = currentNode.textContent.replace(/[\u2580-\u259f]+/g, '');
}

This code snippet consists entirely of plain JavaScript; you can easily test it by pasting it into the JS console of Firefox or Chrome. The regular expression /[\u2580-\u259f]+/ targets any sequence of characters within the "Block Elements" Unicode block, which includes U+2593 Dark Shade (▓). To tailor the regex to suit your needs, simply adjust it accordingly. If unsure about the character codes, simply copy and paste them into the "UTF8 String" box on this page.

Additionally, if these unwanted characters are localized in a particular section of the document, you can enhance the efficiency of the code by substituting the root node (document.body in the example) with the specific DOM node from which you wish to eliminate the characters. Discover the desired nodes using methods like document.getElementById(), or more broadly, document.querySelector() (or even document.querySelectorAll()) and iterate over the outcomes).

Answer 2

One way to achieve this is by utilizing a NodeIterator:

var iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_TEXT);
var currentNode;
while (currentNode = iterator.nextNode()) {
    currentNode.textContent = currentNode.textContent.replace(/[\u2580-\u259f]+/g, '');
}

This code snippet consists entirely of plain JavaScript; you can easily test it by pasting it into the JS console of Firefox or Chrome. The regular expression /[\u2580-\u259f]+/ targets any sequence of characters within the "Block Elements" Unicode block, which includes U+2593 Dark Shade (▓). To tailor the regex to suit your needs, simply adjust it accordingly. If unsure about the character codes, simply copy and paste them into the "UTF8 String" box on this page.

Additionally, if these unwanted characters are localized in a particular section of the document, you can enhance the efficiency of the code by substituting the root node (document.body in the example) with the specific DOM node from which you wish to eliminate the characters. Discover the desired nodes using methods like document.getElementById(), or more broadly, document.querySelector() (or even document.querySelectorAll()) and iterate over the outcomes).

Utilizing grease/tampermonkey (or any other browser extension) to filter out specific characters within webpage elements

Answer №1

Similar questions

The PointCloud vertices in Three.js consistently provide a position of (0,0,0)

The click event does not point to the servlet (IDEA, java)

What is the reason behind Chrome's fullscreen mode turning the background black?

Do not use Express.js to serve the index.html file

Converting XML data (in SOAP format) to a JSON object using JavaScript

The H1 tag is mysteriously displaying padding or margin on the bottom, despite not being set

"document.createElement encounters an issue when used for creating a new window

Error encountered during sequelize synchronization: SQL syntax issue detected near the specified number

Discover the secret sauce to effortlessly adding text upon hovering over a button

Tips for selecting an <select> option value based on an URL parameter automatically

Problem with <meta> tag occurring when initial-scale is adjusted

Can one button be clicked to trigger the activation of another button through a click?

Setting up and launching a fresh JS project

Tips for accessing elements other than the root element using this.$el

How can we avoid re-rendering the same component repeatedly when using React Router v6?

What is the best method to determine the time difference between two timestamps using JavaScript?

Applying a gradient overlay to an image using CSS

Guide on how to call a function in ascx code-behind using JavaScript within the framework of DotNetN

Looking to enhance my current workaround for utilizing Google Spreadsheet's ImportRange feature

Troubleshooting video streaming loading issues caused by 404 errors in URL paths with videojs