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
*/
After successfully using the Canvas of HTML to draw a convex polygon, I encountered an issue. In the provided code snippet, t2 represents an array of points with getX() and getY() methods. The drawing function performs as expected until it reaches the seg ...
On my woocommerce shop page, I am facing an issue where all items are added to the mini-cart without meeting the minimum order requirement. This results in users being able to proceed to checkout without adding enough items to meet the minimum order amount ...
I'm currently working with Material UI Card components. You can find more information here. My goal is to set a maximum height for these cards, ensuring that the text and images are displayed nicely. How should I approach this? Below is a snippet of ...
I'm currently developing a Vue.js application using Vite, and I have a Pinia store that I want to monitor. Below is the content of my store.js file: import { defineStore } from 'pinia'; const useStore = defineStore('store', { st ...
I have several buttons that function like radio buttons - only one can be selected at a time: <button id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button> <button id="btn-silver" name="btn-silver" type="butt ...
Currently, I have a Next.js site that utilizes getServerSideProps for data fetching. However, I am interested in switching to getStaticProps and implementing incremental static regeneration (ISR) for improved performance. Currently, my memory usage is ap ...
My website is linked with WordPress, but I'm encountering a 403 forbidden error in the sub-menu. Can someone assist me with this issue? I have uploaded a screenshot of the folder in iPage here Additionally, I want my WordPress page to show up correc ...
I have been attempting to center an <img> element horizontally within a <div> that is narrower than the image itself. The <div> has overflow: hidden applied to it. For example, if the image is 500px wide and the DIV is 250px wide, is the ...
My primary language is Spanish, which means I use accent marks quite frequently (á, é...). When I need to type them out, I resort to using á, é, and so on. However, I'm facing an issue when trying to compare two sentences in m ...
Currently, my focus is on developing a form that prompts the user to choose between "USA" or "International" via radio buttons. The input field for telephone numbers should then adapt its requirements based on the selected country - either a 10-digit US nu ...
I am experiencing an issue with a div that is positioned absolutely at the bottom left of my website. When I open the site in a new tab using <a target="_blank" href="./index.html">, the bottom value is not being applied correctly ...
Is it possible to populate this jQuery UI datepicker calendar with data from a JSON file containing all non-working days for the years 2017 and 2018? P.S. return [!(month == 8 && day == 27), 'highlight', highlight]; - This example demons ...
Presenting My Router: var MyRouter = Backbone.Router.extend({ initialize: function(){ Backbone.history.start({ pushState:true }); }, routes: { 'hello' : 'sayHello' }, sayHello: function(){ al ...
After attempting to implement a loop without success, I also considered using regex but that did not work either. The code in question is part of a larger project that involves dynamically adding and deleting fields using jQuery. The classes and ids used f ...
Is there a way to automatically display overlays for specific options in a database field using Bootstrap code? The options are SOLD, CONTRACT, and NO. I need different overlays to appear for SOLD and CONTRACT, while no overlay is needed for the NO option ...
Struggling to rearrange complex JSON data (data1) into a more organized format (data2). Progress has been slow. data1 is created by scanning a parent directory (recipes) for html files. data2 is the desired output structure using data1, where content wit ...
While running unit tests for my Angular app, I encountered an issue with spying on a function that is called upon ngModelChange. I am testing the logic inside this function but my test fails to spy on whether it has been called or not! component.spec.js ...
My custom directive needs to access the object $scope.$parent.users. When I use console.log $scope.$parent: myDirective.directive('scheduleItem', function(){ return { restrict: 'EA', link: function($sco ...
My goal is to establish a connection between three arrays in the following manner: arr1 = ['A', 'A', 'B', 'B', 'C', 'C' 'A', 'C'] arr2 = ['a', 'aa', ' ...
Is it possible to utilize the pairwise() method with a ReplaySubject instead of a BehaviorSubject when working with the first emitted value? Typically, with a BehaviorSubject, I can set the initial value in the constructor allowing pairwise() to function ...