Menggunakan JavaScript dan ungkapan biasa untuk mengekstrak teg div yang mengandungi teg img

Question

Saya mempunyai rentetan yang dijana seperti ini

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

Saya ingin mendapatkan div yang mengandungi img dan menambah kelas css dalam div ini untuk mendapatkan rentetan baharu seperti ini

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

Saya cuba kaedah ini

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])

Ia tidak berkesan.

Apa yang perlu saya lakukan?

Answer 1

Adalah disyorkan untuk menggunakan penghurai HTML dan bukannya ungkapan biasa dan gunakan .querySelector来获取带有img的div.

Gunakan antara muka pelayar asli DOMParser dan .parseFromString untuk menghuraikan 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.");
}

Coretan kod di bawah ialah contoh visual

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>