I am dealing with a string containing CSS properties and their values:
str = "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
background: -webkit-linear-gradient(top, black, white);
animation-duration: 12s;";
I want to only match the properties themselves
properties = text.match(/[^;:]*:/g);
However, it also returns "progid:", is there a way to avoid this?
Locate the start of a line or a ";" along with checking for line-break/tab depending on the string formatting:
/(^|;)[^:;]*:/
Further refinement of results is still necessary.
Another approach could be to first split the string by ";", then further split each segment by ":" and extract the initial element for your properties:
var str = "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');background: -webkit-linear-gradient(top, black, white);animation-duration: 12s;";
var rules = str.split(";")
var i, l = rules.length;
var properties = [];
for( i = 0; i < l; i++ ){
properties.push( rules[ i ].split(":")[0] ); //be cautious if there might not always be a result
}
Give it a shot
data = inputText.match(/^[^;:]*:/g);
Note: Here's an improved method assuming there is consistently a space between property and value:
data = inputText.match(/[^ ;:]+(?=: )/g)
To prevent encountering an empty rule while splitting on a semicolon that marks the end of the string,
split on semicolons only if there is content following them;
var splitRules = str.split(/;(?=\S+)/);
for(var index= 0, lengthOfRules = splitRules.length; index<lengthOfRules; index++){
splitRules[index]= splitRules[index].split(':')[0];
}
/*
alert(splitRules)>>(Array)
filter, background, animation-duration
*/
Can I trigger a call to a service or filter that retrieves a promise from the renderWith() function of a column? When I attempt this, the result always appears as "[object Object]". vm.dtInstance = {}; vm.dtOptions = DTOptionsBuilder.fromFnPromise(MySe ...
I am baffled by the fact that margin-left is only affecting certain elements and causing frustration. .setting-container { position: relative; top: 60px; left: 0px; width: 100%; height: calc(100% - 60px); } .setting-topnav { width: 100%; h ...
I am currently utilizing Ajax to delete a row from the Roles table. The functionality allows the user to add and delete roles using a link for each row. While the deletion process works properly and removes the row from the database, the table does not get ...
Within the code snippet, a function is present which performs the following actions. It searches for an email in the input field, then converts the email to an md5 hash, and finally generates a Gravatar URL that is inserted into a class using fadeIn(); ...
(in PHP ... ) I am attempting to eliminate all hard line breaks from a block of text in order to re-wrap it at a specified line length using the wordwrap() function. Given that there could be multiple paragraphs, my assumption is that I must find a way to ...
I have been struggling since yesterday to make this work. I just can't seem to get these flex items to fill the container equally in width and height. No matter what I try, it's not cooperating. <html> <meta charset="utf-8"> ...
Hey there! I'm currently working on a school project and I'm aiming to implement a drop-down menu. Surprisingly, it's proving to be more challenging than expected. <div class="parrent"> <div class="row"> ...
My rolesandresponsibilities collection document is displayed below: [{ "_id": { "$oid": "58b6c380734d1d48176c9e69" }, "role": "Admin", "resource": [ { "id": "blog", "permissions": [ " ...
I am currently working on adding a toggle button using Javascript. I want to include three span tags inside it as well. To achieve this, I am creating a span variable and attempting to append it within a basic FOR loop that iterates 3 times. Below is the ...
Hello, I have recently started learning JavaScript and I am looking to accomplish a specific task. Currently, I am navigating on A.com/. Within the content of A.com/, there is a link labeled as A.com/B. Upon clicking on the link A.com/B, I can see ...
I am working on a project to create a board made up of tiles, but I am facing difficulty in filling up the entire board area. Currently, I have only managed to create 1 column of the board, as shown in the image. Can someone guide me on how to fill the ent ...
Currently, I am in the process of developing a web application that needs to be responsive across various devices including mobiles, tablets, and PCs. My focus right now is on creating a user profile page that adapts well to different screen sizes. To achi ...
I've been struggling to implement an upload progress bar using the XMLHttpRequest level 2 support for progress events in HTML5. Most examples I come across show adding an event listener to the progress event like this: req.addEventListener("progress ...
Hello there, can anyone lend a hand with this problem? This is the code I have been working with: <html> <body> <div style="width=100%"> <div style="float:left; background-color:Red; height:100px">Red</div> <div st ...
I'm facing a seemingly simple problem that I need help with. On my website, there's a hidden div.notification bar at the top. This bar can be displayed by adding either the success or warning class to it. There are two scenarios: either a messa ...
As I add numerous links to my website, I can't help but feel like a novice using the <a href>. I want users to see the URL of each link immediately without needing to hover over it first. Right now, I am structuring my links like this: <a h ...
Currently facing difficulty in changing the color of the text within the input field when it's disabled. I'm utilizing Material UI for this purpose. import React from "react"; import { makeStyles } from "@material-ui/core/st ...
Struggling with implementing two-way binding for SELECT elements. Attempting to dynamically change the selected element through code. While I've come across examples on Stackoverflow for binding the change event for SELECT, finding resources on the ap ...
I've been working on implementing an AJAX Form to allow users to upload their profile picture on my website. However, I've encountered some difficulties with the process. I have created a PHP page where the form is supposed to be posted using AJA ...
Sometimes, I wonder if this question is silly because it goes against the purpose of the Content Security Policy. There's a webpage located at foo.baz.com that requires data from bar.baz.com to function locally. Below is the code snippet for the func ...