Regex search and replace only within a section of HTML

There are cases where you might need to limit the multiple replacements that SiteSpect would do to a specific section of page source

This page is strictly to illustrate an advanced regex example, and not limited to SiteSpect. Regex is not required to use SiteSpect and this sort of example is probably rarely used. But for the developer who runs into a need like this, we hope it is helpful.

Let's say you have a page that looks like:

<div>some content</div>
<img src="/path0">

<div id="contentWrapper">
<img src="/path1">
<img class="someclass" src="/path2">


<div id="new">Hello</div>

<img src="/path3">
<div>some content</div>


And you want to add a class to the images that are within the contentWrapper div. Regex can be used to limit the scope of search and replace by using look aheads - one negative and one positive.

Consider a search

<img(?!.*<div id="contentWrapper">)(?=.*<div id="new")

which effectively says match on the <img string while <div id="contentWrapper"> is not after and <div id="new" is after.

So the replace might be

<img class="lazy-load"

but it will be limited to the two img tags in the contentWrapper div