英文:
How to replace HTML span opening and closing tag that has specific class name with div tag
问题
<div class="line">$2</div>
英文:
I have this HTML code
<span class="line"><span>// Before</span></span>
<span class="line">
<span>import</span>
<span> </span><span>db</span>
<span> </span><span>from</span><span> </span>
<span>'../../lib/db-admin'</span><span>;</span>
</span>
<span class="line"><span>// After</span></span>
<span class="line"><span>import</span>
<span> </span><span>db</span><span> </span>
<span>from</span><span> </span>
<span>'lib/db-admin'</span><span>;</span></span>
I would like to replace every opening and closing span tag with class="line" with the div tag. How can i do it using regular expressions?
This is what i've already tried, but cannot get it until working condition.
/(<span class="line">.*?<\/span>)\s*<span class="line">(.*?)<\/span>((?!<\/span>).)*<\/span>/g, '$1</div><div class="line">$2</div>'
答案1
得分: 2
不要使用正则表达式来分析/解析HTML字符串。而是使用DOM解析器。您可以使用DOMParser来实现这个目标：
function replaceWithDivs(html, selector) {
const doc = new DOMParser().parseFromString(html, "text/html");
for (const elem of doc.querySelectorAll(selector)) {
const div = doc.createElement("div"); // 创建新元素
div.innerHTML = elem.innerHTML; // 复制内容
elem.replaceWith(div); // 替换旧元素为新元素
}
return doc.body.innerHTML;
}
// 示例
let html = `<span class="line"><span>// Before</span></span>
<span class="line">
<span>import</span>
<span> </span><span>db</span>
<span> </span><span>from</span><span> </span>
<span>'../../lib/db-admin'</span><span>;</span>
</span>
<span class="line"><span>// After</span></span>
<span class="line"><span>import</span>
<span> </span><span>db</span><span> </span>
<span>from</span><span> </span>
<span>'lib/db-admin'</span><span>;</span></span>`;
html = replaceWithDivs(html, "span.line");
console.log(html);
英文:
Don't use a regex to analyse/parse an HTML string. Instead use a DOM parser. You can use DOMParser and do this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function replaceWithDivs(html, selector) {
const doc = new DOMParser().parseFromString(html, "text/html");
for (const elem of doc.querySelectorAll(selector)) {
const div = doc.createElement("div"); // Create the new element
div.innerHTML = elem.innerHTML; // Copy the contents
elem.replaceWith(div); // And replace old with new
}
return doc.body.innerHTML;
}
// demo
let html = `<span class="line"><span>// Before</span></span>
<span class="line">
<span>import</span>
<span> </span><span>db</span>
<span> </span><span>from</span><span> </span>
<span>'../../lib/db-admin'</span><span>;</span>
</span>
<span class="line"><span>// After</span></span>
<span class="line"><span>import</span>
<span> </span><span>db</span><span> </span>
<span>from</span><span> </span>
<span>'lib/db-admin'</span><span>;</span></span>`;
html = replaceWithDivs(html, "span.line");
console.log(html);
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论