使用JavaScript和正则表达式来提取包含img标签的div标签

Question

我有一个生成的字符串，像这样

tesgddedd<br> <div><img style="max-width: 10rem;" src="folder/mypicture.jpg"><div> <br></div></div>

我想获取包含img的div，并在这个div中添加css类，得到一个新的字符串，像这样

tesgddedd<br> <div class="myCssClass"><img style="max-width: 10rem;" src="folder/mypicture.jpg"><div> <br></div></div>

我尝试了这个方法

let myString = 'tesgddedd<br> <div><img style="max-width: 10rem;" src="folder/mypicture.jpg"><div> <br></div></div>'
console.log('My new String with div class  : ',myString.match(/<div [^>]*img="[^"]*"[^>]*>/gm)[0])

它不起作用。

请问我该怎么做？

Answer 1

建议使用HTML解析器而不是正则表达式，并使用.querySelector来获取带有img的div。

使用原生浏览器接口DOMParser和.parseFromString来解析HTML。

const generatedHTML = "tesgddedd<br> <div><img style='max-width: 35rem;' src='folder/mypicture.jpg'><div> <br></div></div>";

const parser = new DOMParser();
const doc = parser.parseFromString(generatedHTML, "text/html");

// 获取包含直接子img的div元素
// 注意：它也返回其他子元素
const divWithImg = doc.querySelector("div:has(> img)");

if (divWithImg) {
  // 捕获到带有img的div
  console.log("Before", divWithImg);
  
  // 添加类名
  divWithImg.className = "myCssClass"
  
  // 更新带有类名的div
  console.log("After", divWithImg);
} else {
  console.log("No match found.");
}

下面的代码片段是可视化示例

const generatedHTML = "tesgddedd<br> <div><img style='max-width: 35rem;' src='folder/mypicture.jpg'><div> <br></div></div>";

const parser = new DOMParser();
const doc = parser.parseFromString(generatedHTML, "text/html");

// 获取包含直接子img的div元素
// 注意：它也返回其他子元素
const divWithImg = doc.querySelector("div:has(> img)");

if (divWithImg) {
  // 用于在页面上预览
  const code = document.querySelector("code");
  
  // 捕获到带有img的div
  code.textContent = `
    Before:
    ${divWithImg.outerHTML}
   `;
  console.log("Before", divWithImg);
  
  // 添加类名
  divWithImg.className = "myCssClass"
  
  // 更新带有类名的div
  code.textContent += `
    After:
    ${divWithImg.outerHTML}
   `;
  console.log("After", divWithImg);
} else {
  console.log("No match found.");
}

<pre><code></code></pre>