Looking to strip out any "background-color:[whatever];" styles from the text within a div. The plan is to eliminate all inline background-color styles completely.
I've been eyeing JavaScript's
string.replace(regex,str)
as a potential solution but struggling with crafting the right regex pattern. I need it to identify "background-color:" and then remove that along with everything up to the next ";".
If anyone can steer me in the correct direction, I'd greatly appreciate it.
Thank you!
To achieve this effect, you can utilize the following script:
let elements = document.body.getElementsByTagName('*');
for (let i=0; i<elements.length; i++) {
if (elements[i].style.backgroundColor) {
elements[i].style.backgroundColor = '';
}
}
I opted for looping through the DOM rather than using regex for two main reasons:
I created a quick and simple solution using pure JavaScript in JSFiddle. The code loops through each child element recursively, setting the background-color to transparent if it is not a text node.
function removeChildBackgrounds(element) {
var children = element.childNodes;
for(var i = 0; i < children.length; i++) {
var node = children[i];
if(node.nodeName !== '#text') {
node.style.backgroundColor = 'transparent';
if(node.hasChildNodes()) {
removeChildBackgrounds(node);
}
}
}
}
You can view the JSFiddle demo here.
Useful Links:
Big shoutout to Joey and Sam for their help!
I realized that all I needed was Joey's brilliant idea. By switching to jQuery and utilizing the information that cellContent$ refers to the outer div last operated by execCommand, with the background-color always placed within a <span> element, I was able to simplify it to:
cellContent$.find('span')
.each(function() {
if(this.style.background) {
this.style.background = '';
}
});
Thank you both so much for your assistance!
Encountering unpredictability in CSS loading while deploying my Next.JS site. Everything appears fine locally, but once deployed, the CSS rules seem to vanish entirely. The element has the attached class, yet the corresponding styling rules are nowhere to ...
Currently working on a web application that features a grade calculator allowing users to add and delete grades, all saved in local storage. However, encountering an issue where attempting to delete a specific grade ends up removing the most recently add ...
Currently, I am utilizing express and have a task to execute a POST request to an internal endpoint in the server. Below is the code snippet I am using: request({ url : 'http://localhost:3000/api/oauth2/authorize', qs:{ transaction_id:re ...
I'm currently developing in AngularJS / Jade and I need to implement functionality where an icon changes when a user clicks on something. The code I have right now looks like this: a(onclick='return false', href='#general', data-t ...
Is it possible to write the code below in a single line? <a href="#" onClick="function(){ //do something; return false;};return false;"></a> As an alternative to: <a href="#" onClick="doSomething(); return false;"></a> functio ...
How can the client's hostname be retrieved in a Node / Express server? Is there a method similar to req.connection.remoteAddress that can be used to obtain the client's hostname? ...
In the code snippet below, I am using a Parser script to extract metadata from a live streaming radio station: const Parser = require('../src'); const radioStation = new Parser('http://stream.com/live_32.aac'); radioStation.on(' ...
<html> <head> <script> $( "#clickMeButton" ).click(function() { $(this).next("#hiddenButton").slideToggle( "slow", function() { // Animation complete. }); }); </script> </head> <body> <table> <tr& ...
Below is the HTML VueJS code sample that I am working with: <div v-for="site in topSites" ref="ts"><a :href="site.url"> ... </div> Update: Here is the full div code: <div v-for="site in topSites& ...
Currently, I am working on some exercises related to async/await, and I seem to be stuck on the following problem: The function opA should be executed before opB, and opB should be executed before opC. Arrange the function call ...
I have a search bar on my website with the following code: <form onsubmit="return IsValidCustomer()"> <input class=" sb-search-input" placeholder="Search for a customer..." type="text" value="" name="search" id="search"> <input cl ...
I have set up two handlebar helpers with the names 'outer' and 'inner'. In my template, I am using them as shown below: {{#outer (inner data)}} {{/outer}} However, I am encountering an error in the console related to the inner helper, ...
I am attempting to add particle js as the background for my website. I have tried implementing this code snippet: https://codepen.io/nikspatel/pen/aJGqpv My CSS includes: position: fixed; z-index: -10; in order to keep the particles fixed on the screen e ...
Here is the function I'm working on: function swipe2() { window.open('edit.php?no=','newwindow') } This is part of my PHP code (I skipped some lines): for ($i = $start; $i < $end; $i++) { if ($i == $total_results) { ...
Currently, I am developing a login and registration system. However, when I input the correct details in my register Post method, the request remains pending and I cannot identify the error. The specific error message it presents is data and salt arguments ...
What is the best way to add Insert Column functionality to the ContextMenu of a Syncfusion Treegrid? Insert Column Rename Column Delete Column ...
Is there a way to make text continue animating on the page even when the cursor is not placed on it? I understand the hover function, but how can I ensure the text keeps animating without interruption? $(document).ready(function () { $("#start&q ...
So I have this controller set up. function TestCtrl($scope) { var contentFromJson = 'Hi! this is <b>Bold</b> and <i>Italic</i>'; var dateFromJson = '/Date(1394526738123)/'; $scope.Date = dateFromJso ...
I'm interested in finding user-friendly tools in JavaScript to easily create small, reusable components. I envision a component builder with a simple API that can generate HTML output for specified data, allowing for seamless embedding on websites. Co ...
https://i.stack.imgur.com/LL1g9.png Looking at the image provided, my goal is to allow users to navigate between pages on the Home page without having to refresh the entire browser window. I believe this can be achieved using Ajax technology, am I correct ...