Notepad++使用正则批量替换img标签内class属性添加lazy类的方法

需求说明 #

• 目标：在HTML源码中定位所有<img>标签内的class="字符串，统一替换为class="lazy
• 原有方案问题：自定义正则<img(.*?(\bclass="\b)[^$]*)\/>仅能匹配单个img标签内的首个class实例，无法完成全量匹配替换
• 测试用HTML源码：

<div class="collapsible-tabs-panel  js-panel" id="v-panel3">
<div class="d-flex"><img alt="azure cloud" class="advance" data-entity-type="file" data-entity-uuid="dab5b799-82be-47d8-8ef4-04408fbcae28" data-src="/sites/default/files/inline-images/azure-cloud-services-5.jpg" src="#" />
<div class="collapsible-tabs-text">
</div>
</div>
</div>

<div class="collapsible-tabs-panel  js-panel" id="v-panel4">
<div class="d-flex"><img alt="inative cloud" data-entity-type="file" data-entity-uuid="c648456a-4f4d-4f68-8766-019603af59e2" data-src="/sites/default/files/inline-images/azure-cloud-services-6.jpg" src="#" />
<div class="collapsible-tabs-text">
</div>
</div>
</div>

<div class="collapsible-tabs-panel  js-panel" id="v-panel5">
<div class="d-flex"><img alt="cloud analytics" class="analyse" data-entity-type="file" data-entity-uuid="cd33a197-e24d-4425-9287-c8d8ddc7afdb" data-src="/sites/default/files/inline-images/azure-cloud-services-7.jpg" src="#" />
<div class="collapsible-tabs-text">
</div>
</div>
</div>

<div><img alt="telecom player" class="astute" data-entity-type="file" data-entity-uuid="99132ab5-943b-4c6c-8a9e-25c2c5dfbe13" data-src="/sites/default/files/inline-images/azure-cloud-services-32.jpg" src="#" /></div>

操作步骤 #

直接使用Notepad++正则替换即可完成需求，无需录制宏：

1. 按快捷键Ctrl+H调出替换窗口
2. 查找模式选择正则表达式，勾选「匹配换行」选项
3. 「查找目标」输入框填写以下正则：

(?<=<img[^>]*?)class="

正则逻辑：通过正向零宽后发断言限定匹配范围，仅当class="字符串出现在<img标签内部（即<img开头到最近的>闭合标签之间的区域）时才会被命中，完全不会误匹配div等其他标签的class属性，也不存在单标签仅匹配一次的问题，支持跨行书写的img标签。

4. 「替换为」输入框填写以下内容（注意末尾保留1个半角空格，避免和原有类名连写）：

class="lazy 

5. 点击「全部替换」即可完成所有符合规则的内容修改。

替换效果验证 #

• 所有img标签内已存在的class属性会自动追加lazy前缀，例如原class="advance"会变为class="lazy advance"
• 无class属性的img标签不会被改动，例如测试用例中id为v-panel4面板下的img标签将保持原有结构
• 所有非img标签的class属性不会被误修改

内容的提问来源于stack exchange，提问作者Jayesh Limaye