Utilizing regular expressions in Powershell to modify a CSS file

Snippet from my current theme.css file:

.actionBlock[selected] {
        color: var(--gray11);
        background-color: var(--gray11);
    }

I am trying to modify color: var(--gray11); to 

color: #FFF; /* UPDATED : var(--gray11) */

After attempting in PowerShell:

$file = "theme.css"
$content = Get-Content $file -Raw
$content = $content -replace '(\.actionBlock\[selected\]\s*{[^{}]+color:\s*)([^;]+)(;)', ('$1#FFF; /* UPDATED : $2 */')
Set-Content -Path $file -Value $content

This resulted in changing my CSS as follows:

.actionBlock[selected] {
        color: var(--gray11);
        background-color: #FFF; /* UPDATED : var(--gray11) */
    }

This did not meet my expected outcome: I only intended to modify the color property, not the background-color.

cssregexpowershell

Answer №1

The regex you provided is very close to being correct, but it just needs a slight modification to make [^{}]+ match in a lazy manner by adding ?. Visit https://regex101.com/r/K6HTYG/2 for more details.

$css = @'
.actionBlock[selected] {
  color: var(--gray11);
  background-color: var(--gray11);
}
'@

$css -replace '(\.actionBlock\[selected\]\s*{[^{}]+?color:\s*)([^;]+)(;)', '$1#FFF; /* EDITED : $2 */'

However, there is a chance of failure if color comes after background-color. A more reliable approach might be to search for the line where color is preceded only by white space. More information can be found at https://regex101.com/r/99QdN3/2.

$css = @'
.actionBlock[selected] {
  background-color: var(--gray11);
  color: var(--gray11);
}
'@

$css -replace '(?m)(?<=\.actionBlock\[selected\]\s*{[^{}]+?^\s*color:\s*)([^;]+);', ' #FFF; /* EDITED :$1 */'

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

Remove the bootstrap styling from a section of the webpage

I am in the process of setting up a preview box for an HTML editor on one of my pages. I created a basic <div id="preview"></div> style container where I occasionally input my HTML source, which is working adequately. The issue arises when Boo ...

htmlcsstwitter-bootstrapfrontendcss-reset

What is the best way to place an <a> tag and a <p> tag side by side in an HTML

I have a question on organizing this HTML code: <ol class="results-list"> <% @results.sort_by { rand }.each do |result| %> <li class="<%= 'checked-out' if result.catalog_item.library_status == 'Checked out&apos ...

htmlcss

Guide on showcasing jQuery variable values in PHP on a single page

I have some JavaScript and PHP code that I need help with. I want to assign a jQuery variable value to a PHP variable called $nicks, and then echo the value of $nicks on the same page. <script type="text/javascript"> var axel = 131.5678466; < ...

phpjqueryhtmlcss

Looking for a feature similar to mix-blend-mode that can change the text color to its inverse when overlapping with a background color that matches

Seeking assistance on a Mondrian-style CSS Grid layout with a rotated sticky heading. Looking to achieve a visual effect where intersecting text turns white when a black horizontal line passes over or under it. https://i.sstatic.net/YQaxV.png Considering ...

cssmix-blend-mode

Is there a way to modify the hover border effect of a TextField in material-ui?

In Persian language, the text direction is set to rtl. I am looking for a way to adjust this input field to suit my language for the project. Please refer to the following image: Image Link I want to achieve something similar, but I am unsure how to ch ...

cssreactjsflexboxmaterial-uicss-selectors

Adjust the image dimensions within the DIV container

I am currently working on creating my personal portfolio website. I have encountered an issue where the image inside a div element enlarges the size of the entire div as well. My goal is to keep the image slightly larger while maintaining the same size for ...

javascriptjquerycsshtml

Issue with CSS: 200vw not scaling correctly for mobile devices

I'm attempting to create a horizontal slide effect between two div elements, so here is the HTML code: <div id="container"> <div class="viewport-1"> <div class="inner-div"> <h1>Viewport background 1</h1></ ...

javascriptjqueryhtmlcss

Upon script load, a random item from an array will be displayed and recorded in a separate array

I'm working on a fun code project where I aim to display random animal names in different colors that change when a specific keyboard key is pressed. The challenge I'm facing is that the first random animal name in a random color only appears aft ...

javascripthtmlcss

Adjust the color of the active link on the page using Angular and CSS

I have a project that I need to modify by adding a sub menu that appears on every page but is only coded once. My goal is to highlight the link for the current page, all within one HTML snippet. Although the list renders correctly, I'm struggling to g ...

javascripthtmlcssangularjs

Why is it that aligning items in a row doesn't seem to function properly when I apply a custom class to a container-fluid in Bootstrap 4?

Recently, I started delving into the world of front end development. After mastering the basics of HTML5 and CSS3, I ventured into Bootstrap 4. My current project involves creating a replica of the Facebook login page. To achieve a full-width design, I uti ...

htmlcssbootstrap-4vertical-alignment

Using "bottom: 0" does not function properly in Firefox when using fixed positioning

I'm working on a basic webpage that includes a textarea element which I want to expand to fill the entire screen, leaving a small gap at the top. Everything looks great in Chrome, but in Firefox, the textarea doesn't stretch all the way to the bo ...

cssfirefox

Steps for creating a jQuery function that responds to changes in a text box value

Currently, I have a text box containing certain values and a submit button alongside a slider. When I click the submit button, the slider changes. However, I would like to achieve the functionality where instead of clicking the submit button, changing the ...

javascriptjqueryhtmlcss

Utilize regular expressions to extract and arrange dates from a Python dataframe

I have a large pandas data frame with thousands of rows containing string dates in various formats. Some examples include: 05/10/2001; 05/10/01; 5/10/09; 6/2/01 May-10-2001; May 10, 2010; March 25, 2001; Mar. 25, 2001; Mar 25 2001; 25 Mar 2001; 25 March 2 ...

pythonregexdatefindall

Is there a way to freeze a row in Bootstrap 4?

I recently put together a slider featuring four images, but I've encountered an issue. When the pixel size drops below 768px, the image quality diminishes and they start stacking on top of each other. Is there a way to keep the images in a single row ...

htmlcsstwitter-bootstrapbootstrap-4

Struggling to keep text aligned to the left?

Check out the image at https://i.sstatic.net/Qu7hT.png in my jsfiddle. It remains fixed in its position regardless of the screen width. However, the adjacent text does not behave in the same way. I aim to have the text positioned DIRECTLY next to the htt ...

htmlcsscss-position

The dilemma of calculating the total width of jQuery's list items

I am in the process of creating a submenu that should look like this: HTML: <ul class="mainMenu clearfix"> <li><a href="#">Eurodan huset</a></li> <li><a href="#">Hustyper</a></li> <li&g ...

jquerycss

Additional spacing within nested divs utilizing the display: table property

In my current project, I am working on styling a list to resemble a table layout for horizontal alignment. The first column contains labels, while the second column features groups of buttons using Bootstrap's btn-group-justified class. This setup ess ...

csstwitter-bootstrap

What is the best way to extract data from this list of values separated by commas?

I'm faced with a challenge where I have a list of users and their permissions separated by commas. Some users have multiple permissions, up to 8 in total: user_a, permission_1 user_b, permission_1, permission_2 user_c, permission_1, permission_2, per ...

pythonregexcsv

Make sure that the webpage does not display any content until the stylesheet has been fully loaded by

I am seeking to utilize ng-href for loading different Themes. One issue I am encountering is that the unstyled content appears before the stylesheet is applied. I have created a Plunker where I made changes to Line 8 in the last 3 Versions for comparison ...

javascriptjqueryhtmlcssangularjs

"Customizing the color of the arrow in Bootstrap tooltips

Trying to customize tooltips in twitter-bootstrap, I set the template option of the tooltip with inline styles to achieve red tooltips instead of the default black color: $(document).ready(function(){ options = { container: 'body&ap ...

csstwitter-bootstrap