Utilisation de JavaScript et d'expressions régulières pour extraire des balises div contenant des balises img

Question

J'ai une chaîne générée comme celle-ci

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

Je veux obtenir le div contenant l'img et ajouter une classe CSS dans ce div pour obtenir une nouvelle chaîne comme celle-ci

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

J'ai essayé cette méthode

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

Ça ne marche pas.

Que dois-je faire ?

Answer 1

Il est recommandé d'utiliser un analyseur HTML au lieu d'expressions régulières et d'utiliser .querySelector来获取带有img的div.

Utilisez les interfaces de navigateur natives DOMParser et .parseFromString pour analyser le 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.");
}

L'extrait de code ci-dessous est un exemple visuel

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>