使用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>