Wildcard Find/Replace (This is over my head.)

[Starlight Lady]

I want to change (in multiple files): 

<div></div><h1>Page Title</h1>

to

<div><h1>Page Title</h1></div>

 So I tried to Find:

<div></div><h1>[^"]*</h1>

and Replace with:

<div><h1>[^"]*</h1></div>

The [^"]* is something I found on find/replace help pages. Using a simple * or \* didn't find it. 

Dreamweaver found the correct string of code and moved the </div> where I needed it, but it literally replaced the title with [^"]*

The find only worked when "use regular expressions" was selected. Otherwise, it doesn't find it at all. 

Almost everything I've read about wildcards is way over my head, so please make sure you dumb down your answers for me. I've wasted so much time on this, I could have changed 50 pages by hand already. Just seems like using a wildcard should be so much easier than this. Hopefully I'm missing something very simple. Thanks!  

[Nancy OShea]

How big is your site? 

I ask because there should be only 1 <h1> tag per document.  Therefore, I would search for all <h1> titles</h1> and select FIND ALL. 

Systematically click on each Result and adjust <div> nesting as required.   Rinse, lather, repeat.

[Starlight Lady]

I have about 250 pages left to go through. So a find/replace would be most helpful. I would have done them by hand if there were only 10-20 pages. But yes, there's only one H1 per page. 

[Nancy OShea]

OK try this:

Ctrl + Shift + F to bring up Find & Replace.  Advanced Tag.  NOTE: I highly recommend doing this in a test document to ensure it works as desired BEFORE applying to your entire site.  Assuming each Page Title is unique, I'm using JavaScript to grab contents from your document's <title> tag.  See screenshot.

Hope that helps.

[Starlight Lady]

I'm sorry, I couldn't get this to work for me. The find didn't work, so I don't know if the replace would have worked or not. I assume you meant to put </div> at the end, so I added the / . Thanks for trying to help. 

[L e n a · Accepted solution]

you’re almost fine, just change your searching REGEX by

<div></div><h1>(.*?)</h1>

And then replace your destination string by

<div><h1>$1</h1></div>

The parenthese will isolate the unchanged group, and named then by $1

The lazy char ? will stop the previous group when the next hard string will be found

Well, that should do the tricks

[Starlight Lady]

While I didn't understand anything you said there, I was able to copy/paste the code and it worked! So, yay!! I'm very happy to have it fixed! Thank you! 

[L e n a]

Cool, I'm glad it helped you, you're welcome!
Is this the way it is, or would you like me to try to explain differently for you to understand the expression ?

[Starlight Lady]

I'm pretty sure anything you tell me will be way over my head, so you shouldn't bother. I appreciate the offer though. 

[L e n a]

As you wish.

Anyway, I've been wanting to write an article on this subject for some time now, and if you don't mind, your case study could be used as a support 🙂 .

[Nancy OShea]

@L e n a 

I wish you would you write an article about RegEx expressions in Dreamweaver.  I'm sure it would be valuable to many users (myself included).  🙂

Happy 2023!

[L e n a]

@L e n a 

I wish you would you write an article about RegEx expressions in Dreamweaver. 

By @Nancy OShea

With pleasure, then, maybe this could be the subject of a series of small articles , starting with the basics of expressions, then the tools available online to test our research, and finally back to DW with the treatment of use cases like those mentioned in this thread?

What do you think? how will you see it?

If necessary, could you please review it before posting, just to be sure the content is digestible (by the way if other people are interested to join the adventure 😉 )

[L e n a]

Happy 2023!

By @Nancy OShea

Thanks ! Happy new year to you too !!!

[Starlight Lady]

You're more than welcome to use my post as your case study. I'm flattered. 

I can give you a second riddle to solve as well, if you'd like. 😉  It's probably an everyday matter for someone such as yourself, but I have to edit them one by one. 

I have 75 pages left to do. Each of these pages has an image with code that starts out like so...

<img src="../images/spells

I would love to be able to find/replace all of these images and add a div tag around each one, like so....

<div class="medium"> IMAGE </div>

If it's not too much trouble, and you know how I could do that, I would very much appreciate your help. It would save me a great deal of time. 

Thanks,

Heather

[L e n a · Accepted solution]

This kind of search and replace should be possible through the search in files function (Ctrl | Cmd + Shift + F),  then using the advanced tab of DW, but since the topic of this thread is based on REGEX, I propose that we continue with the use of REGEX.

In fact, this is the same query as used before.

In the search field enter :

(<img.*?>)

In summary, we search for the string <img followed by any characters (using the dot) and this as many times as necessary (because of the star), but with the question mark we limit the string when we find a closing chevron ... By placing the whole expression in parenthesis, this identifies the full expression as a group.

And in the replacement field :

<div class="medium">$1</div>

Then we replace this find with , the literal string <div class="medium"> followed by the first group found, identified by $1 (in our case we have only one set of parenthesis, so only one group in the expression), then we end with a new literal string </div>

Hoping I haven't been too confusing.

[Starlight Lady]

I may be starting to understand it a bit, thank you.

The only problem I'm having (and I considered mentioning this in my previous post) is that there are other images on the page (in the header mostly, so I could potentially fix that afterward, since it's an asset, but that does scare me a bit.) So using just "img" selects at least three images on every page. But the image I want to change has a different address, so if we can put this additional information in it, it would narrow it down to just the image I want the div added to. 

<img src="../images/spells

 Sadly, when I tried to add that to the code you gave me, it no longer found anything at all. I'll keep trying to figure it out, but I thought I'd let you know, since you probably have an easy (for you) fix for it. Thanks for all your help. 

[Starlight Lady]

But wait! The second time I tried it, it did find it! But now I see a new problem. I forgot to include the caption under the image. The whole line I need the div around looks like this. I guess it's a lot more than just the image. The alt text may or may be there, as well as the "open in new window" command, but the line does typically end with an </a>

<img src="../images/spells/imagename.jpg" alt="description of image" width="592" height="750"><br>
Title of Artwork by <a target="_blank" href="https://facebook.com/artistname">
Artist's Name</a>

[Starlight Lady]

I'm sorry, I realize this is much more complex than I originally made it seem. 

[L e n a]

I admit that I did not understand everything, youps

Could you please give an example using the full HTML fragment that you want to modify... kind of like you did in your very first post...

I have this... and I would like to get that.

If sometimes the starting snippet can differ depending on the context, don’t hesitate to present two starting fragment

like :

I have this and sometimes this and I would like to get that at the end.

[Starlight Lady]

I want to apologize for my late replies. I have tried to turn on every kind of notification, hoping my browser or email will let me know when there's a response, but I don't get any notification, so I have to remember to come here and refresh the page. I was happy to see you had responded, but I would have been even happier if I had noticed it six hours ago, when you posted, lol. 

Below is code that contains the page header, as well as the image I'd like to change. There are two images in the header that I don't want to change. (So the larger code immediately below is just so you can see the code for the two images that I don't want to affect.) 

<body><!-- #BeginLibraryItem "/Library/Header.lbi" --><div>
<p class="borders"><a href="../index.html">
<img class="center" src="../images/eutm-2020-650.png" alt="site banner" width="649" height="90"></a></p>
<p class="borders">
<img src="../images/rose-bar-long.gif" width="535" height="39" alt="rose bar">
</p>
</div><!-- #EndLibraryItem -->
<div><h1>Holly Driving Charm</h1></div>
<img src="../images/spells/the-angel-jessica-allain.jpg" width="500" height="746" alt="angel">
  <br>
  <a target="_blank" href="https://facebook.com/EnchantedWhispers">&quot;The Angel&quot; 
  by Jessica Allain</a>

So I would like to change this:

<img src="../images/spells/the-angel-jessica-allain.jpg" width="500" height="746" alt="angel">
  <br>
  <a target="_blank" href="https://facebook.com/EnchantedWhispers">&quot;The Angel&quot; 
  by Jessica Allain</a>

to this:

<div class="medium"><img src="../images/spells/the-angel-jessica-allain.jpg" width="500" height="746" alt="angel">
  <br>
  <a target="_blank" href="https://facebook.com/EnchantedWhispers">&quot;The Angel&quot; 
  by Jessica Allain</a></div>

Thanks,
Heather 

[Nancy OShea]

Heather,

This is a Library Item.  Any changes you make to Header library file effect all pages containing that library item.

<!-- #BeginLibraryItem "/Library/Header.lbi" --><div>
<p class="borders"><a href="../index.html">
<img class="center" src="../images/eutm-2020-650.png" alt="site banner" width="649" height="90"></a></p>
<p class="borders">
<img src="../images/rose-bar-long.gif" width="535" height="39" alt="rose bar">
</p>
</div><!-- #EndLibraryItem -->

https://helpx.adobe.com/dreamweaver/using/library-items.html

To bring up Library Items, go to Window > Assets panel, click on Book icon.

[Starlight Lady]

Thanks Nancy. It's not the images in the header that I need to change, but I included those so that hopefully the find/replace code Lena writes won't affect those images. I have considered that if I go ahead and do a find/replace on the header code/library asset, I could easily fix it by simply updating the header, so that's a possibility if it's necessary to change all the images. But ideally, I'd like to just do a find/replace on the image below the header. 

I'm excited to announce that I got an email notification for your reply! Woohoo! 

[L e n a · Accepted solution]

You don't have to apologize, you know, we all run somewhere and time still flies 😉 The Floyd sang that, wonderfully, a few years ago.

Well, it seems that your page images are all contained in a folder called spells, itself contained in a folder called images

So, did you tried to replace the search query with

(<img src="../images/spells/.*?>)

That should do the job

If that desn’t match, probably that you will have to escape the slash character / using a back slash \ as :

(<img src="..\/images\/spells\/.*?>)

Now, if your folder spells can have different spelling, on different pages…like spells, or foo or baz in that case one could adjust the request using an extra pair of parentheses and using the pipe character | to be used as an OR bolean… as

(spells|foo|baz)

That way the REGEX will use one or the other options.

So the final request should be something like

(<img src="..\/images\/(spells|foo|baz)\/.*?>)

[Starlight Lady]

The only thing this code leaves out is the caption below the image. There's a <br>, then a link to the artist. After that closing </a>, I'd like to put the </div>. Problem is, not every image has a caption, so I might be better off using the code you gave me and just moving the closing </div> by hand to the end of any caption (I have to open every page anyway and I'm down to 28 pages with images on them now, so this won't take much longer.)

I really appreciate all your help with this. 

[L e n a · Accepted solution]

I propose a not very elegant method, but I fear the case where you will have several identical images within the same page, or images that doesn’t have links below them

anyway give a try with this expression (this one doesn’t handle different folder's name, just spells)

(<img src="../images/spells/[\s\S]*?(?=</a>)</a>)

on the other hand, make a BACK-UP of your local site, just in case... well, it would still be recoverable, but you might as well avoid too much inconvenience 😉