84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
我有一個生成的字串，像這樣
tesgddedd
我想取得包含img的div，並在這個div中加入css類，得到一個新的字串，像這樣
我嘗試了這個方法
let myString = 'tesgddedd ' console.log('My new String with div class : ',myString.match(/]*img="[^"]*"[^>]*>/gm)[0]) 它不起作用。 請問我該怎麼做？ 1 0 0 P粉252116587 全部回覆 (1) 我來回復 關閉 P粉7181655402023-09-09 10:02:25 1樓 建議使用HTML解析器而不是正規表示式，並使用.querySelector來取得帶有img的div。 使用原生瀏覽器介面DOMParser和.parseFromString來解析HTML。 const generatedHTML = "tesgddedd "; 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 "; 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."); } 點贊+0 新增回覆 关闭回复 P粉252116587 回覆
它不起作用。
請問我該怎麼做？
建議使用HTML解析器而不是正規表示式，並使用.querySelector來取得帶有img的div。
.querySelector
img
div
使用原生瀏覽器介面DOMParser和.parseFromString來解析HTML。
const generatedHTML = "tesgddedd "; 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 "; 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."); }
建議使用HTML解析器而不是正規表示式，並使用
.querySelector來取得帶有img的div。使用原生瀏覽器介面DOMParser和.parseFromString來解析HTML。
下面的程式碼片段是視覺化範例