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

When text is inserted into an inline-block div, it causes the div to shift downwards in

Consider the following HTML code snippet: <div class="one"> Test </div> <div class="two"> </div> <div class="three"> </div> If we apply the following CSS styles: div { display:inline-block; height:30px; ...

Using a timer to make Ajax calls twice on a single webpage

Can multiple ajax calls be made simultaneously on the same page to different receiving div tags? I am struggling to find a solution to this issue. I have a total of 3 pages: a home page, and two PHP pages named status and alert which echo the results. Wi ...

What is the reason behind the different behavior of PHP's preg_match when extracting data into a named array from strings compared to string literals?

When trying to extract 6 specific fields - Sender, Customer ID, and so on from the body of an HTML email, a certain approach is followed: $string = '... some other html text ... <p> <strong>Sender:</strong>&nbsp;Holly Schöne ...

Tips on retrieving values from input files using jQuery

Is there a way to retrieve the value of an input type using jQuery? Specifically, when I add a file to the input file, I want to dynamically add more input types with the file's value. Currently, I am using the following code: $('#show_input&apo ...

Displaying JQuery dialogs briefly show their contents before the page finishes loading

Utilizing jquery 1.10.3, I am creating a dialog that is quite intricate. When I say 'intricate', I mean that the dialog's content includes data from a database, such as dropdown lists populated by the results of database queries, alongside s ...

Utilize the display: flex property to position a div in the bottom right corner of its containing element

I'm trying to showcase a yellow div "icon" at the bottom right corner of its red container "content". Can someone help me figure out what's incorrect in my code? .root { display: inline-flex; background-color: red; } .content { d ...

Omit a certain td element from the querySelectorAll results

Greetings! I am currently working with an HTML table and I need to figure out how to exclude a specific td element from it, but I'm not sure how to go about it. Here's the HTML code: <table id="datatable-responsive" c ...

Limiting the draggable element within a compact container using jquery UI

I've been attempting to drag an <img> within a fixed-width and fixed-height container. Despite researching on Stack Overflow and finding this solution, it doesn't seem to work for my specific case. If you check out this fiddle I created, y ...

Move your cursor over an image to modify the z-index of another image

I am facing an issue with my webpage that consists of 6 small images and one large image in the center, made up of six layers each containing one image, similar to this example: http://jsbin.com/onujiq/1/. I have set the z-index property of all center imag ...

Is it possible to align text to an image within an input text field?

<input type="text" class="usernm" style="color:black;font-weight: bold;outline-width: 0;" id="username" /> I have a question about styling HTML. I am attempting to include an icon inside a text field, but I'm strugglin ...

Issue with displaying PDF files on Google Chrome due to a software glitch

Recently, I encountered a puzzling issue on Google Chrome. I am not sure if the error lies with Google or within my code. When I set the div as display: none; and then show it again, the PDF view only shows a grey background. However, if I zoom in or out, ...

Initiate a webpage reload

Currently, I am developing an android application specifically designed for tablet devices. This application will display a simple HTML page with text that will be shown for extended periods of time, sometimes up to several hours. The content on this page ...

HTML5 input type Color displays individual RGB values

This code snippet opens up a variety of options for the user to manipulate different color values such as R, G, B, HEX VALUE, HUE, etc. However, the specific requirement is to only extract the Red value. <input id="color_pick"type="color" value="#ff0 ...

Retrieving data from a database in PHP and assigning it as the value for an HTML select tag

Seeking assistance on a project to develop a stock management system for an herb factory using PHP with a MySQL database. Currently working on a page that allows the user to edit the value of a bench containing herbs. The bench details have been stored in ...

Utilizing the power of HTML5 drag and drop functionality in conjunction with Angular Material 2's md

When working with Angular Material 2 and attempting to enable reordering of list elements, I encountered an issue where the functionality works perfectly for li-tag but fails with md-list-item. Why is that? Here is a snippet of my template: <md-nav-li ...

Angular - CSS Grid - Positioning columns based on their index values

My goal is to create a CSS grid with 4 columns and infinite rows. Specifically, I want the text-align property on the first column to be 'start', the middle two columns to be 'center', and the last column to be 'end'. The cont ...

Developing web applications using Express.js and Jade involves connecting CSS stylesheets

I'm currently in the process of developing a web application using Express.js along with some Bootstrap templates. I utilized jade2html for conversion, and while the page loads successfully, it lacks any styling. The following code snippet is what I ...

Invoke data-id when the ajax call is successful

Initially, there was a smoothly working "like button" with the following appearance: <a href="javascript:void();" class="like" id="<?php echo $row['id']; ?>">Like <span><?php echo likes($row['id']); ?></span ...

Removing the gaps within table cell contents

Is there a way to eliminate the border space between cells in a table? Despite using cellspacing, I still see a thin white border. Any suggestions on how to fix this? <body> <center><table style="border-collapse: collapse; width:400px; bo ...

Launch the game within the gaming application

I am looking to incorporate a game within another game... Here's what I mean: Open the app: Pandachii Next, navigate to the 4th button (game pad). When we click on the game icon, I want to launch another game (located below the Pandachii window - c ...