"Searching for a specific pattern excluding any occurrences found within another pattern using regular

I'm currently working on creating a regex pattern to identify all ID selectors within a CSS file. Essentially, I am looking for any word that begins with a # symbol.

#\w+

However, there is a complication as color values can also start with a #. Therefore, my goal is to locate words starting with a # that are NOT enclosed between { and } brackets. Unfortunately, I'm struggling to formulate this in the correct syntax.

I am using Notepad++ so I require a regex expression compatible with that platform.

For context, my ultimate objective is to remove everything from the file that is not an ID selector, resulting in a clean list of selectors. Initially, I attempted:

Find: [^#]*(#\w+)
Replace: \1\r\n

... then executed Replace All function.

However, I encountered the issue related to colors.

Update

Someone requested for an example. Here's one:

Input:

.foo {max-width: 500px;}
#bar {text-align: left;}
.splunge, #plugh {color: #ff0088;}

Desired output:

#bar
#plugh

The key point is to include only the "pound strings" outside of braces, excluding those inside braces.

Answer №1

How about this method? Try using a lookahead expression:

#\w+(?=[^}]*?{)

This regex pattern ensures that a { character follows the match (indicating it's part of a selector) without immediately following a } character (to exclude matches against color declarations in CSS).

  • #: Match must start with a #
  • \w+: Match one or more word characters (may need adjustment, as \w is equivalent to [A-Za-z0-9_])
  • (?=...): Positive lookahead assertion
  • [^}]*?: Any character except }
  • {: The opening curly brace character

Check out the regex explanation here!

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

Switch up the background image of the webpage using CSS styling

Currently, I am facing an issue with changing the background image on my webpage. The problem is that when I change the background image on one page, it also reflects on another page where I don't want the change to occur. Is assigning an id/class to ...

Tips for entering multiple values in an input field

I am attempting to implement a feature where multiple names can be added from an autocomplete drop-down menu to an input field, similar to the example shown below: https://i.sstatic.net/D4hGA.jpg Here is what I aim to create: Upon selecting an item from ...

Uncertainty surrounding the inherited styling of an element in HTML

I am seeking clarification on the distinction between two methods of writing HTML code: CSS file (applies to both the first and second way): .parent{ color:red; font-style: italic; } .child_1{ color:blue; } .child_2{ color:green; } First approach ...

Integrating image transitions into JavaScript

Could you provide guidance on how to create buttons from the three images within the "fadein" div in order to navigate directly to a specific jpeg? Currently, the three jpgs are displayed in a continuous loop. Thank you. ...

When two rectangles are created at the same coordinates (x, y) in SVG, it results in an unexpected border appearing

.rect-x { fill: red; } .rect-y { fill: pink; } <svg viewBox="0 0 1024 768"> <rect class="rect-x" x="0" y="0" width="100" height="100"></rect> <rect class="rect-y" x="0" y="0" width="100" height="100"></rect> </svg& ...

Opera bug causing issues with Bootstrap's :active list item styling

Lately, I've been delving into Bootstrap and have come across an issue while using Opera. Upon the webpage loading, the navbar should display a list structured as follows: <li class="hidden active"> <li class="page-scroll"> <li class=" ...

Optimizing carousel image dimensions for various screen sizes

I'm currently working on a full screen carousel in HTML and I'm curious about the optimal image size to ensure it resizes properly on all screen sizes without any distortion. Can anyone help me out with this? ...

Tips for effectively displaying elements on a page

After making changes to my css/html code, all the elements within a div are now displayed in a single line instead of appearing as separate <p>contents</p> tags with each on a new line. An example of this issue can be seen here: Dealing with C ...

Adjust the position of the xAxis on the Highcharts chart to move it downward or

I recently inherited some code from the previous developer that uses highcharts.js (v3.0.1). I'm having trouble with the xAxis appearing within the graph itself (see screenshot). Despite my efforts to recreate this issue in jsfiddle, I can't seem ...

How to Use the env() Variable in CSS Styling?

Operating on React with Material-UI, my web app features a bottom nav bar. For certain devices like the latest iPad, I must allocate an additional 8 pixels below it to account for the horizontal gray bar that substitutes for a home button: https://i.sstat ...

What is the code to hide text once an HTML5 video has completed loading?

Is there a way to display "Video Loading" with a 75% opaque background over an HTML5 video, and then have both the text and background disappear once the video has finished loading? If so, how can I achieve this? Thank you for your time and effort! You ca ...

Align text vertically in a responsive absolutely-positioned div using CSS

Is there a way to horizontally center text inside a responsive div without relying on new CSS3 tricks? Check out this fiddle for reference: http://jsfiddle.net/M8rwn/ .iosSlider { position: relative; overflow: hidden; width: 100%; height: ...

Trouble with custom font causing text to be cut off in h1 and h2 sizes when window is

Update: After using a custom font "Gotham" in the @font-face, I encountered several bugs that seem to stem from this source. I'm unsure of how to resolve these issues while still retaining my custom font. Any suggestions? Update #2: The problem was r ...

How can you change the list-style-type to switch between lower-alpha and decimal on nested items within an ordered list?

I am attempting to reverse the list-style-type of nested items within an ordered list, including sub-items and sub-sub-items. I have tried using CSS counters but it doesn't seem to be working. Can anyone point out what I might be doing incorrectly? ol ...

Ensure the proper fit for smaller screens

While using Bootstrap 4 and incorporating Stream UI Kit for the user interface within my application, I've encountered an issue where the column size doesn't display correctly on smaller screens! For example: https://i.sstatic.net/mUekg.png On ...

When CSS width:auto expands beyond its intended length

I'm experiencing an issue when I set the width to auto, the div expands to full length rather than adjusting to the width of the inner divs. Here is the HTML code: <div class="vidswraper"> <div> <div class="videoimage"> <img src ...

What could be causing certain CSS rules to not take effect?

In my current project, I have a Flexbox layout nested within Bootstrap v4 that switches orientation based on landscape or portrait mode. There is a primary div called #no, managed by Flexbox using the order property, which contains five icons serving as bu ...

Arranging HTML Lists in Perfect Order

I am working with an HTML list that contains links styled as background images rather than text. The container is 200px tall and I would like the links to be centered inline within the container. Usually, I would use line-height:200px; for text to achieve ...

The anchor tag fails to function properly when nested within an image element inside an animated container

As I am currently developing a solar system webpage, my aim is to redirect users to a specific page when they click on a planet. Unfortunately, the anchor tag does not seem to be functioning as intended. I attempted to animate the anchor tag with an image, ...

NodeJS Lambda@Edge for URL redirection and path rewriting

Just recently, I delved into learning NodeJS + Lambda@Edge and one of the challenges I encountered was performing HTTP redirects and rewrites. The issue I am currently facing involves using regex on the destination. Specifically, I want to redirect https: ...