I want to create a filter that replaces inappropriate words and changes the background color using JavaScript. Here is what I have so far:
$(document).ready(function () {
$('body').html(function(i, v) {
return v.replace(/bad/g, 'CENSORED');
});
});
However, I'm unsure of how to change the background color where I replaced the inappropriate words.
Take a look at the demo on jsFiddle
$(document).ready(function () {
$('body').html(function(i, v) {
return v.replace(/ugly/g, '<span style="background-color:yellow;">CENSORSHIP</span>');
});
});
Give this a try, target using the css() function:
$(document).ready(function () {
$('body').html(function(i, v) {
$('body').css("background", "#eee");
return v.replace(/ugly/g, 'CENSOR');
});
});
Edit 1:
In this scenario, you can avoid changing the background with Javascript by adding a class in your stylesheet, for instance:
.highlight{
background: #f00;
}
Then, add a span to the words with that class, and the word will automatically have a highlighted background.
$(document).ready(function () {
$('body').html(function(i, v) {
return v.replace(/ugly/g, '<span class="highlight">CENSOR</span>');
});
});
Easy peasy
Change the background color of the body by using document.body.style.background = YOUR_COLOR_HERE;
$(document).ready(function () {
$('body').html(function(i, v) {
return v.replace(/ugly/g, 'FILTER');
});
$('body').css('background','#ff0000')
});
To witness its functionality, click on this link: http://jsfiddle.net/bKKu3/
Cascading Style Sheets (CSS)
.censor-text { background-color:yellow; }
JavaScript (JS)
var censorText = '<span class="censor-text">CENSORED</span>';
$('body').html(function(i, v) {
return v.replace(/profanity/g, censorText);
});
Could it be that you want to change the background color of the replaced text?
When working with node js, I encountered an error message stating uncaughtException: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode, despite using babel 6 es2015 preset which should include use strict. My pro ...
I am facing a unique situation on my website where I have multiple popovers (pop1), (pop2), (pop3) that are triggered in sequence when the "Next" button is clicked. These popovers appear one after the other without direct access to them individually. If y ...
I am currently working on a responsive page design and have come across this useful resource: http://www.bootply.com/2sfiCehqac My main objective is to ensure that when the screen size is medium or large: 1) div_left and div_right (orange and blue) adjus ...
Looking to create a TinyMCE React package, I've been using import { Editor } from '@tinymce/tinymce-react'; However, I'm encountering this message - https://i.sstatic.net/j4Cfw.png To remove the message, typically you would add the AP ...
It might seem like I'm overthinking things, but I am trying to achieve two goals with the HTML code provided. First, when a user selects an option, I want to toggle the display style of the leaderTable from hidden to visible if it meets certain criter ...
Hey everyone, I wanted to ask about images on a website that have a unique effect when you hover over them. On the site follow your feet website, there is a grid section of destinations and when you move your mouse over a destination, it suddenly expands a ...
The map displayed below, as represented in the code section, needs to be sorted in ascending order based on its values. I would like to achieve an end result where the map is sorted as depicted in the last section. If you have any suggestions or methods o ...
Even after trying to use "outline: 0", nothing seems to change. #input_field { outline: 0; width: fit-content; margin: auto; margin-top: 20%; border-radius: 30px; border: 2px solid turquoise; padding: 6px; } <div id="input_field"> ...
I've been struggling to confirm the validity of a signature generated using Google's cloud KMS, as I'm consistently receiving invalid responses. Here's my approach to testing it: const versionName = client.cryptoKeyVersionPath( p ...
I'm in the process of starting a new project and I am thinking about how to incorporate this into react/nextjs. I want to create a user selection or hashtag selection dialog around the textarea, but I haven't been able to find any helpful article ...
I am currently exploring a tutorial on jQuery autocomplete using remote data. In my JSP page, I have the following code snippet: (getData.jsp) Department t = new Department (); String query = request.getParameter("q"); List<String> ...
Recently, I have been diving into learning nodejs and experimenting with creating a post API that interacts with static data stored in a MySQL database. Let me briefly share the configuration setup I am working on: const mysql = require('mysql') ...
Within my HTML, there is a <p> tag which dynamically receives a link value from a JavaScript function. The link could be anything from www.google.com to youtube or instagram. How can I utilize the "copytoclipboard" library to copy this link to clipbo ...
Struggling with a script that searches multiple fields in the same table, I need it to return results even if one or three parameters are left blank. My attempts using PHP and MySql have been fruitless so far, which is why I am reaching out to the experts ...
Can you help me figure out how to apply a background image to the menu while still keeping the background color? HTML: <div class="top"> <div class="menu"> Nop. </div> Nam hendrerit erat eget tellus mollis facilisis. ...
I followed the configuration provided in another answer at But, I am facing an issue: Failed to compile. ./src/components/cards/CreateCard.js Line 59:22: Parsing error: Unexpected token, expected "}" 57 | editor={ClassicEditor} 58 | ...
I am attempting to dynamically change the class of a tab on the dashboard based on the selected page. In the dashboard, there are 3 tabs: <div> <ul class="menu"> <li class="MenuDashboard"><a href="#" >Dashboard</a&g ...
I am currently utilizing Select2 JS and Datatables JS to handle data in JSON format. However, I encountered an issue where the value Animal & Veterinary is displayed differently in JSON as Animal \u0026amp; Veterinary, and on the Select2 filter as ...
Currently, I am working on a responsive web page that features a form. However, I have noticed that all the input elements are spilling out of the form both from the left and right sides. Can someone please shed some light on why this could be happening? ...
I have a layout set up to show users: %table.table %tbody - @users.each do |user| %tr %td= avatar_tag user, {small:true, rounded:true} %td = username user .online-tag = user.online? %td= ...