In search of a regular expression for identifying any of several classes

In the process of upgrading all my websites, I decided to redesign them so that all URL's default to lower case. This meant changing all image names and paths to lower case as well, which was accomplished using regexes. However, this action inadvertently changed a lot of other things to lowercase too.

Previously, a typical div looked like this:

<div class="Cool R P Wx500">

Now, some divs look like this:

<div class="cool r p wx500">

It should be noted that only some divs and other tags were affected by this change.

I am now seeking a regex pattern that will help me find specific classes such as "Cool," "R," or "Wx500." Since my classes are not always listed in a particular order and some consist of a single letter (e.g., B = border and R = float to the right), finding a suitable regex is proving to be tricky.

Ideally, I would like to search for divs that contain the class "Cool" and then separately search for divs that contain the class "R." It would also be beneficial if these searches could be made case-sensitive. For instance, searching for divs with the class R but only where it has been changed to lower case (e.g., [div class="cool r"])

Is there a way to achieve this? While Dreamweaver offers a reliable regular expression utility, it does not seem to have the functionality to select one class out of a series. As a Mac user, I primarily use Dreamweaver and TextWrangler as my text editors.

Answer №1

If you want to find and replace a specific class in your HTML code, you can do so using the following regular expression pattern:

(class=".*?\b)r(\b.*?")

To use this pattern, simply replace r with the class you are searching for, and then replace it with $1new$2, where new is the new class name you want to assign.

Here is an explanation of the pattern elements:

  • .*?: Matches any character non-greedily.
  • \b: Represents a word boundary (including quotes).
  • () GROUP: The first part will be placed in group 1 ($1), and the second part in group 2 ($2).

For example, the pattern will match these instances:

<div class="r">
<div class="r cool p wx500">
<div class="cool r p wx500">
<div class="cool c wx300 r">

But it will not match the following:

<div class="runcool c wx300">
<div class="uncool cr wrx300">
<div class="uncool c wx300r">
<div class="R">

Answer №2

In case Dreamweaver does not have support for lookarounds (I am unable to confirm as I do not have access to it), you can try the following alternative method:

an example using "cool" as a class

Search for

(<div ([^>]+ )?class="([^"]+ )?)cool( |")

Replace with $1Cool$4

Here, $1/$4 refers to "everything captured by the first/fourth set of parentheses".

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

JavaScript appending checkboxes to a list not functioning as expected

I have not been using jQuery, JavaScript, and HTML to create a list of products. The task I am working on now is the ability to select multiple items from this list. Currently, the HTML list is dynamically populated with <li> elements using JavaScri ...

Guide to continuously play the animation, Version 2

I have been struggling with an animation that I need to loop indefinitely. The problem arises when trying to use animation-iteration-count: infinite. It seems like no matter where I place it in the code, whether within the keyframes or normal CSS rules, it ...

Struggling to fetch a custom attribute from the HTML Option element, receiving [object Object] as the result instead

I've been facing a challenging issue all day. My task involves making an ajax call to a predefined JSON file and trying to save certain contents into option tags using custom attributes. However, every time I attempt to retrieve the data stored in the ...

Using the ID selector to create a media query

My website is live, and I'm working on making it mobile-friendly. Most of the site works well on mobile, but I'm having trouble centering a jquery lightbox function using media queries. I'm not sure if my syntax is wrong or if there's a ...

What is the best way to automatically assign a class attribute to all form widgets in Django?

Whenever I create a form using Django, I want the input tag to automatically include a specific CSS class (form-control). Currently, I have to manually add lines of code in my forms.py file for each field like this: class InsertItem(forms.ModelForm): ...

Troubleshooting a unique CSS problem on an Android PhoneGap

We are currently working on an Android application using PhoneGap, HTML, CSS, and jQuery Mobile. After compiling the application in Eclipse, everything seems to work correctly. However, I am facing an issue where my CSS styles are not updating when recompi ...

Using Node JS to serve an HTML file along with cascading style sheets

As I delve into pure node.js, I encountered an issue related to the HTTP protocol. After spending hours searching and testing my code, I finally managed to serve my HTML page with CSS successfully. Take a look at my code snippet below: const server = http ...

Version 66 of Chrome on Mobile Browser now offers Autoplay functionality

My goal is to implement a feature where an image with a play icon is displayed, and when the user clicks on the icon, a video is loaded in an iframe within a popup window. Despite following the guidelines provided in this link, we are facing issues with ...

How to Add Catchy Titles to Your Menu Items on Silverstripe CMS?

Hey there! I'm currently working with Silverstripe CMS using the "Simple" template. I'm interested in finding out how to add subtitles to my menu items. Here's the current structure of my navigation template: <nav class="primary"> &l ...

Python: Automate clicking on checkboxes with Selenium

Recently, I've encountered a problem and I'm in search of an answer. Below is some HTML code that I need to work with. My goal is to send a snippet of this HTML to selenium so that it can click on a checkbox. However, I don't want to use the ...

Steps for dynamically loading the correct pane without having to refresh the header, footer, or left navigation

Looking to create a web application using HTML, Bootstrap, and jQuery that includes a header, footer, left navigation, and right pane. The content of the right pane will be loaded from a separate HTML page based on what is clicked in the left navigation. ...

Erase every picture contained within the element

<div id="uniqueidhere"> <span> <span><img src="image1link"></img></span> <span><img src="image2link"></img></span> <span><img src="image3link"></img></span> <span>&l ...

issue with stacking data in Google Charts

Check out my HTML code: <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></scri ...

Modify the appearance of the elements dynamically by applying styles from the CSS file without relying on the

In my CSS file, I have the following styles: .myClass { ... } .myClass:focus { ... } Am I able to modify these styles from my code? For instance, can I change the focused style of an input element when a button is pressed? ...

What could be the reason for the selection box in my form not changing the items when togg

I'm having an issue with my form selection box code that used to work but is now not functioning properly. Could someone please help me identify where the error lies? Essentially, I have a form with the ID #main and a select box named #chart-type. Th ...

Using javascript to transform the entire list item into a clickable link

Currently, I am using PHP in WordPress CMS to populate slides on a slider. Each slide contains a link at the bottom, and my goal is to target each slide (li) so that when clicked anywhere inside it, the user is directed to the URL specified within that par ...

Seeking a solution for resizing the Facebook plugin comments (fb-comments) using Angular when the window is resized

Is it possible to dynamically resize a Facebook plugin comment based on the window or browser size? I want the fb-comment div to automatically adjust its size to match the parent element when the browser window is resized. <div id="socialDiv" class="c ...

Exploring XPath: strategies for excluding text within nested elements

if I come across some HTML structure like this: <div class=unique_id> <h1 class="parseasinTitle"> <span> Game Title </span> </h1> Game Developer </div> Is there a unique way to extract only the "Game Develo ...

Repeated information in HTML tables

I am currently working with two HTML tables and two sets of JSON data. Initially, I load one table with the tableData which has a default quantity of 0. In my HTML form, there are three buttons - save, load draft, and edit. Upon clicking on load draft, I p ...

Radio boxes vanish in Safari when -webkit-perspective is applied

Check out this quick demonstration on Safari only: http://jsfiddle.net/2late2die/8AJnD/ If you remove the perspective style, all checkboxes will appear normal. When using -webkit-transform-style:preserve-3d, the checkboxes disappear. This issue seems to af ...