Is there a way to automatically parse colors in text and apply them to CSS? For instance, if I type #40464f, I want the color to be caught and included in some CSS styles.
I am familiar with how to achieve this by adding markup:
<span data-color="">#40464f</span>However, I am curious to know if it is possible to do this automatically without manually adding markups?
Uncertain of the specific question, I will offer a method to identify (HEX) colors within an HTML element.
Here is the sample HTML code:
<p id="subject">
Here is a color: #fff. Red is #ff0000 while #9ab57d is another color.
</p>
Utilize JavaScript:
$(function() {
var colorMatches = $('#subject').text().match(/#(?:[0-9a-f]{3}){1,2}/gi);
// ['#fff', '#ff0000', '#9ab57d']
$.each(colorMatches, function(index, value) {
// `value` represents each identified color...
});
});
(See Demo)
Update:
Demo showcasing the usage of colors:
HTML:
<p id="subject">
Here is a color: #fff. Red is #ff0000 while #9ab57d is another color.
</p>
<ol id="result"></ol>
JS:
$(function() {
var colorMatches = $('#subject').text().match(/#(?:[0-9a-f]{3}){1,2}/gi),
$resultList = $('#result');
$.each(colorMatches, function(index, value) {
$('<li />').text(value).css('background-color', value).appendTo($resultList);
});
});
Second Update:
As per suggestions, replacing inline styles (view demo):
HTML:
<p id="subject">
Nous obtenons les 2 couleurs suivantes : #40464f & #0f131a
</p>
JS:
$(function() {
var $subjectElement = $('#subject'),
content = $subjectElement.html();
content = content.replace(/#(?:[0-9a-f]{3}){1,2}/gim, "<span style=\"background-color: $&;\">$&</span>");
$subjectElement.html(content);
});
It seems like you need to compare the text within a span using regular expressions as the best approach.
Here is a filter that enables regex selection of elements:
Check out this example on JSFiddle.net
<input /> <button>Modify</button> <div></div>
<script>
$(function(){
$('button').click(function(){
$('div').css('background-color', $('input').val());
});
});
</script>
If you want to change the text color instead, just use .css('color', $('input').val())
Remember to improve your selectors for better performance!
Currently seeking a method to generate a unique identifier for use as a parameter in a JavaScript function. Specifically interested in extracting the id of the first td element if feasible. <tr id='it'><td id="#nameiron">Jason</td ...
I have created the following code in an attempt to display a message to only Internet Explorer users visiting the page: <script src="jquery.reject.js"></script> <script> $(document).ready(function() { $.reject({ reject: { a ...
In this scenario: http://jsbin.com/anoyik/edit#preview http://jsbin.com/anoyik/edit#source Is there a way to make the red box's width a minimum of 200px and allow it to expand as the browser window's width increases horizontally? ...
In my current setup, I am using a JavaScript code snippet to navigate users to the specific location of the information they click on in a side navigation menu. However, one issue that arises is if they first click on one item and then another quickly, t ...
Hello everyone, I am a beginner and I have a question about using a function on two buttons with #ID. The problem is that I have to write the same function twice for different button IDs. I want to call the function with Onclick so that I only have to writ ...
Is there a way to hide the Copy, CSV, Excel, PDF, and Print buttons located in the top right corner of the datatable? These seem to be default features of datatables, but I have been unable to find any information on how to remove or hide them. Below is t ...
I needed to adjust the font size of specific text within an option tag in my code snippet below. <select> <?php foreach($dataholder as $key=>$value): ?> <option value='<?php echo $value; ?>' ><?php echo ...
My application consists of two components: DisplayNotes.vue, which displays data in card format retrieved from the backend, and UpdateNotes.vue, which allows users to update existing data by opening a popup. The issue I'm facing is that when a user cl ...
Is it possible to automatically redirect users to a new page at a specific time? I would like visitors to be redirected to a new site starting from 12:00AM on December 31st, without allowing them to access the current site after that time. Is there a way ...
I am currently exploring the idea of developing a countdown timer that incorporates videos. In order for this timer to function effectively, it must be able to retrieve data such as countdown time, break time, number of sets, and video (or images if no vid ...
I'm having trouble getting the material-ui app bar example to work as I want. I've created a CodeSandbox example based on the Material-UI website. My Goal: My goal is to make the search field expand fully to the right side of the app bar, regar ...
I am currently working on creating a dropdown suggestion box that hides when the input field and dropdown box are no longer in focus. My HTML code: <input type="text" id="user_address"> <div id="user_address_sg">SUGGESTION</div> <di ...
I have created some fake checkboxes using elements like <span> after the real checkbox and they are working fine! However, I am having trouble counting the checked checkboxes when a checkbox is clicked. I have tried using methods like: $(".elm:chec ...
I am currently working on a JQUERY project and facing a challenging situation. I usually know how to create dropdown menus that depend on one another, but this time I need a dropdown menu that displays age ranges based on the date entered in the birth-date ...
In my design, I have a link positioned next to an image with perfect vertical alignment. Everything looks great when the text has the standard text-decoration, centered vertically and all that. However, as soon as I remove the text-decoration, leaving the ...
After calling my service to retrieve a list of strings, I encountered an error message. $(document).ready(function () //executes this code when page loading is done { $.ajax({ type: "POST", url: "Services/pilltrakr.svc/getAllUsers", ...
Currently, I am facing a challenge with an SPA that is being developed using various custom components from different sources. The main issue at hand is how to initialize certain settings (such as Endpoint URLs) using a settings file that can be configure ...
If there's a more efficient method for accomplishing what I'm about to inquire about, please inform me. So far, this is the best solution I could devise. I am looking to have a series of divs that enclose a sliding div within them. The sliding d ...
Check out this problem on my server at THIS LINK .login-div{ background: #fff none repeat scroll 0 0; height: 500px; left: 50%; width: 500px; right: 0; z-index: 99999; top: 20%; position: ...
I have a form with two submit buttons: one labeled as "SUBMIT" and the other as "SCHEDULE NEXT ROUND". When a user clicks on the "SUBMIT" button, the form values should be stored in the database and redirect to the view page. If they click on the "SCHEDULE ...