Analyzing CSS transform values for rotate3d utilizing regular expressions

I want to split css transform values into an array, while keeping rotate values grouped together.

For instance:

'translate3d(20px, 5px, 10px) rotateX(20deg) rotateY(10deg) rotateZ(0deg) skew3d(20deg, 10deg) rotateX(-20deg) rotateY(100deg) rotateZ(-30deg)'

should become

[
    'translate3d(20px, 5px, 10px)',
    'rotateX(20deg) rotateY(10deg) rotateZ(0deg)',
    'skew3d(20deg, 10deg)',
    'rotateX(-20deg) rotateY(100deg) rotateZ(-30deg)'
]

We can assume that the rotate values will always follow this sequence 

rotateX(20deg) rotateY(10deg) rotateZ(0deg)
.

Is it possible to achieve this using regex in javascript? Any help is appreciated!

javascriptcssregexcss-transforms

Answer №1

If you always expect the rotate properties to be grouped together, you can use the regex pattern 

/\s(?=\S+\(.*?\))(?!rotate(?:Y|Z))/
to split the string.

The regular expression 

/\s(?=\S+\(.*?\))(?!rotate(?:Y|Z))/
will identify spaces \s that are followed by characters within parentheses (?=\S+\(.*?\)). It will exclude spaces that come before rotateY and rotateZ with the negative lookahead (?!rotate(?:Y|Z)).

Demo Here

var text = 'translate3d(20px, 5px, 10px) rotateX(20deg) rotateY(10deg) rotateZ(0deg) scale(2) rotateY(45deg) skew(30deg)';
var sections = text.split(/\s(?=\S+\(.*?\))(?!rotate(?:Y|Z))/);

Result of splitting:

[
    "translate3d(20px, 5px, 10px)",
    "rotateX(20deg) rotateY(10deg) rotateZ(0deg) scale(2)",
    "rotateY(45deg)",
    "skew(30deg)"
]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding a class to radio buttons with a specific label using jQuery

As of now, I am utilizing jQuery to apply or remove a class when a radio button is selected. However, the issue arises when it checks all radio buttons, resulting in CSS being added to only one radio button. My HTML layout consists of rows containing eith ...

javascriptjqueryhtml

Loop through each object and add them to an array in a file using NodeJS

Currently, I have a scenario where I am executing a POST request inside a for loop function and the response needs to be stored as an object in an array file. Below is the code snippet that I am utilizing: var arrayFile = fs.createWriteStream("arrayFile.j ...

javascriptnode.jsarraysfor-loopobject

The ng-click functionality is not functioning as expected within the directive

Take a look at this snippet of my HTML: <section ng-controller="GalleryController as gallery"> <nav footer-directive></nav> </section> This is the GalleryController I'm using: angular .module('myapp') ...

javascriptangularjs

Can multiple groupings of objects be viewed in a JSON file?

Currently, I am interested in creating a leveling system without relying on a database. While I understand that using a database is the more efficient approach, my server doesn't have a large user base and I have yet to learn how to work with database ...

javascriptnode.jsdiscorddiscord.js

Displaying the identical date on two separate Ajax Calendar Extender controls in Asp.net

I am facing an issue with some ajax calendar extenders. I have two similar calendars and two textboxes, each linked to one calendar. <asp:TextBox ID="txt1" runat="server"</asp:TextBox> <cc1:CalendarE ...

javascriptasp.netajaxcontroltoolkit

Function useAppDispatch is missing a return type

.eslintrc.js module.exports = { root: true, extends: [ '@react-native-community', 'standard-with-typescript', 'plugin:@typescript-eslint/recommended', 'plugin:jest/recommended', 'plugin:p ...

javascriptreactjstypescriptreact-reduxredux-toolkit

Is it possible to simultaneously send a JSON object and render a template using NodeJS and AngularJS?

I'm currently facing issues with my API setup using NodeJS, ExpressJS Routing, and AngularJS. My goal is to render a template (ejs) while also sending a JSON object simultaneously. In the index.js file within my routes folder, I have the following s ...

javascriptangularjsnode.jsajaxexpress

Exploring Nested Divs with Vue Test Utils

Recently, I came across this shallowMounted vue component: <div class="card p-relative"> <div class="card-header"> <div class="card-title h4"> a lovely title <!----> <!----> </div> </div ...

javascriptvue.js

What is the best way to incorporate multiple Bootstrap templates into an Angular project without causing conflicts between them?

When incorporating a bootstrap template into the admin interface, it is important to consider that its design may vary from the template used for visitors. Mixing multiple styles based on different templates can lead to conflicting styles and can potenti ...

javascriptcssangularbootstrap-4

Having trouble sending data to a Django function with Ajax request

I am currently facing an issue with my AJAX calls in Django. While fetching data works seamlessly, adding new data is resulting in an error message. Method Not Allowed (POST): /mymodels/ Method Not Allowed: /mymodels/ [17/Mar/2020 22:27:24] "POST /mymodel ...

javascriptpythondjangoajax

When using PHP's `json_encode()`, don't forget to append a "1" at the

While utilizing json_encode in my project, I have encountered an issue that is perplexing. On one particular page where I make an ajax call, the resulting json seems to mysteriously add a 1 to the end of the string. The output of my return string appears ...

javascriptphpjqueryajaxjson

Ways to display an image within a div when hovering over a specific element?

I am working on recreating a specific effect found at in the section titled 'Capture and share anything quickly'. The effect involves displaying an image in the right block when hovering over the left text. I have successfully implemented this e ...

jqueryhtmlcss

Halt the Changing of Button and Typography Styles with React Router and MUI

I am currently working on a component that I want to make clickable. However, when I wrap them in a <Link> element (from react-router-dom) or set component={Link} to="" on them, all the text inside them automatically becomes hyperlinks. For ...

cssreactjsmaterial-ui

Steps to make ng-packagr detect a Typescript type definition

Ever since the upgrade to Typescript 4.4.2 (which was necessary for supporting Angular 13), it appears that the require syntax is no longer compatible. Now, it seems like I have to use this alternative syntax instead: import * as d3ContextMenu from ' ...

javascriptangulartypescriptd3.jsng-packagr

Tips for altering the color of an activated Bootstrap dropdown toggle

When the Dropdown menu is open, I would like to customize its default colors. Specifically, I want to change the border color and background using CSS. https://i.sstatic.net/vKwLE.png Below is the HTML code snippet: <div class="row menu"> <ul ...

htmlcsstwitter-bootstrap

Jquery solution for toggling multiple Divs individually

I'm currently working on a small application that has both a sidebar menu and a header menu. My goal is to have all items in these menus toggle the visibility of content in one main window or page. When a button is clicked, I want it to show the corre ...

javascriptjquerycssuser-interfaceshow-hide

Configuring download destination in WebDriver with JavaScript

I am trying to change the default download directory for Chrome using JavaScript (TypeScript). I attempted to set options like this: let options = webdriver.ChromeOptions; options.add_argument("download.default_directory=C:/Downloads") let driver = webd ...

javascriptselenium-webdriverselenium-chromedriver

Using Angular 2 to execute an interface while making an HTTP GET request

I've managed to successfully retrieve and display data from a JSON object using *ngFor in Angular. However, I am struggling with applying an interface to the retrieved data. This is the content of my interface file: import {Offer} from './offer ...

javascriptangular

Ways to determine the height of a responsive div's background image

I have a container with a background image. Inside this container, there are additional elements like my navigation bar. My goal is to make the container have the same height as the background image. I've attempted the following: .bg { ...

css

When you select the checkbox button, a textfield and submit button will appear. Once you click the submit button, the checkbox button will be disabled

<td> <input type="checkbox" ng-model="alert.acknowledged" ng-disabled="alert.acknowledged" ng-click="onacknowledgedClick(alert)"></td> <td> <span ng-if="!alert.acknowledgeInProgress">{{alert.acknowledgedComments}}</span&g ...

javascriptjavahtmlangularjs