For instance, I would like the following codes
.x {color: blue; background: red}
.y {color: purple; background: yellow}
.z {color: blue; border: gold}
.w {align: left; abc: gold}
to transform into an array similar to this
var styles = [
".x {color: blue; background: red}",
".y {color: purple; background: yellow}",
".z {color: blue; border: gold}",
".w {align: left; abc: gold}"
];
Can this be achieved? Thanks in advance!
Give this a shot
const styles = `.a {color: red; background: black}.b {color: green; background: white}.c {color: red; border: silver}.d {align: center; abc:silver}`;
let cssArr = [];
styles.split('}').map(item => {
let trimmedItem = item.trim();
let finalItem = (trimmedItem + "}");
cssArr.push(finalItem)
});
cssArr.pop();
console.log(cssArr);
In Javascript, there are multiple techniques for parsing strings. While regular expressions are the most advanced method, simpler tasks can be accomplished using functions like substr and split.
split breaks a string into parts, as demonstrated by:
".a {color: red; background: blck}".split('{')
This would create an array with two segments, one before "{" and one after:
[".a ", "color: red; background: blck}"]
Alternatively, substr allows you to extract portions of a string. For example:
".a {color: red; background: blck}".substr(4)
This function excludes the first four characters:
"color: red; background: blck}"
On the other hand:
".a {color: red; background: blck}".substr(4, 10)
skips the initial four characters, includes the following ten, and then ignores the rest:
"color: red"
To explore more string prototype methods, visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
To achieve the desired outcome in CSS manipulation, the following JavaScript code can be utilized:
var cssContent = ".a {color: red; background: black}.b {color: green; background: white}.c {color: red; border: silver}.d {align: center; abc: silver}";
// Splitting using '.'
var specialCharDot = ".";
var cssArrayDot = cssContent.split(specialCharDot).map(item => specialCharDot + item).filter(item => item !== specialCharDot);
// Splitting using '}'
var specialCharBrace = "}";
var cssArrayBrace = cssContent.split(specialCharBrace).map(item => item + specialCharBrace).filter(item => item !== specialCharBrace);
Implementing a filter function ensures that any empty or excess values are eliminated from the final array.
Here is a RegEx pattern that can tidy up your styling code: /\s(?=\.)/g:
var design = `.a {color: red; background: black} .b {color: green; background: white} .c {color: red; border: silver} .d {align: center; abc: silver}`;
var result = design.trim().split(/\s(?=\.)/g);
console.log(result);Check out this JavaScript code snippet:
var cssStr = ".a {color: red; background: black}.b {color: green; background: white}.c {color: red; border: silver}.d {align: center; abc: silver}";
var css = cssStr.split('}').filter(u=> u!="").map(i => i + "}");
console.log(css);When working with a large list of id/parents in an external extension, it's essential to efficiently filter out unnecessary elements for better performance. The list can contain up to 11,000 lines, so removing irrelevant elements is crucial. The init ...
I am looking to count and list the number of links within different Span Tags. Within the provided HTML code snippet, there are two anchor links under 'Upcoming Event' Span, and 4 links under the 'Recent Free LIVE Webinars' section. Ca ...
Currently, I am facing an issue with the smooth scroll feature on my website. Although I have implemented a to top arrow for users to move back to the top section of the page, the scrolling is not as smooth as intended. The JavaScript code I used for achi ...
Looking for a solution to the issue of obtaining a push token Error: Unable to retrieve push token for device. Ensure that your FCM configuration is correct I have integrated Expo permissions and notifications in my React Native app, but nothing seems to ...
I have an HTML document and I am loading a script inside it like this: <!doctype html> <html lang="en"> <head> <meta charset="utf-8> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorX ...
I have been working on creating a unique wall feature for my website, inspired by Facebook. My aim is to allow users to submit form data and have it validated before storing it in a database. Additionally, I want this stored data to be displayed in a desig ...
As a beginner in the world of React and Material UI, I am currently working with Material UI version "1.0.0-beta.17", React 15.6.2, styled-components 2.0.0, and styled-components-breakpoint 1.0.1. Within a div element, I have two TextInput fields. const ...
One of the challenges I'm encountering in my application is that, when using a simple onClick event to show a popup with a large size, the page automatically scrolls down to the bottom after the popup appears. This issue seems to be specific to the Fi ...
I've recently started working with node.js and I'm attempting to remove an object from a JSON file when making a DELETE request. Despite my efforts, the object isn't being deleted as expected. Here is the code I have written: const express = ...
I'm facing a challenge with the following query: Stuff.findOneAndUpdate({ status: 'open', ...query }, value, { new: true }); Here, query is defined as: { 'buyer.user': mongoose.Types.ObjectId(user._id) }; The Stuff model contains ...
I have a Laravel project. I added font awesome fonts to my SCSS file in the following way. Here are the font dependencies: "dependencies": { "@fortawesome/fontawesome-free": "^5.15.3", "@fortawesome/fontawesome-pro": "^5.15.3", // Font Awesome ...
I'm trying to make my tabbed content open on a specific tab by changing the URL. I remember seeing something like this before but can't seem to find it! Here's the fiddle I created: http://jsfiddle.net/sW966/ Currently, the default tab is ...
Currently, I am exploring the use of Angular with Struts, and I have limited experience with Angular. In my controller (Controller.js), I am utilizing a post method to invoke the action class (CartAction). Despite not encountering any errors while trigge ...
I'm currently working on a website for my friend's bar, but I'm facing an issue with Chrome where the content can't push past the "notch". Interestingly, Safari displays it fine on mobile, while Chrome has this unsightly white space. I ...
One of my challenges involves a parent DIV with a width set to 100%. Dynamically, this parent DIV is filled with numerous children DIVs. I am trying to calculate and assign their widths using only the calc method in CSS or LESS. This is because the flex ...
In my NextJS application, I have implemented a catch all route that uses the following code: import { useRouter} from 'next/router' This code snippet retrieves all the parameters from the URL path: const { params = [] } = router.query When I co ...
I am facing a dilemma with my GridView that contains a textbox in one of its fields. To ensure that the user enters only a single character "x", I have implemented a range validator: <asp:TextBox ID="txtMP3Master" runat="server" Text='<%# Eval( ...
Within my Laravel controller, I am constructing a multidimensional associative array: $trendChart = Array ( "series" => Array ( "data" => Array(1, 1, 2, 2, 3, 3, 3, 3, 4, 4, 4, 5) ), "xaxis" => Arr ...
I am dealing with an array containing 2 values, and for each value, I need to make an AJAX query to an API to check the stock availability. If there is stock for both values, a certain message should be executed, otherwise, a different message. This check ...
When attempting to initialize my 2D arrays in IntelliJ (if that matters), I am encountering a strange issue. It seems that only the first box is getting initialized for the specified size. For example, if I try to create an array like this: int[][] grid ...