如何解决替换几乎所有HTML标记,而不用JS中的字符串替换其中的一些标记
我需要替换字符串中几乎所有的HTML标签。
应保留标签的内容。
我只想保留几个标签:
- p
- li
- ul
- ol
- b
例如:
INPUT:
"<p>TEXT</p><div>container</div><p></p><ul><li><b>list element</b>: 0.1 [mm]</li><li><strong>Another list element</strong>: 0.2</li></ul><span>span element</span>"
OUTPUT:
"<p>TEXT</p>container<p></p><ul><li><b>list element</b>: 0.1 [mm]</li><li>Another list element: 0.2</li></ul>span element"
我知道我可以一一替换所有标签来做到这一点:
string.replace(/<\/span>/g,'');
也许有更快的选择。
我该如何实现?
解决方法
最好避免使用正则表达式来解析Html
,在这种情况下,您可以使用诸如DOMParser
之类的html解析器
htmls = `<p>TEXT</p><div>container</div><p></p><ul><li><b>list element</b>: 0.1 [mm]</li><li><strong>Another list element</strong>: 0.2</li></ul><span>span element</span>`;
let parser = new DOMParser();
let doc = parser.parseFromString(htmls,"text/html");
let span = doc.getElementsByTagName("span");
let sr = doc.getElementsByTagName("strong");
let elmarray = [...Array.from(span),...Array.from(sr)];
elmarray.forEach((e) => {
e.outerHTML = e.innerHTML;
});
console.log(doc.body.innerHTML);
如果您的html
很简单,则可以谨慎使用replace
和正则表达式
html =
"<p>TEXT</p><div>container</div><p></p><ul><li><b>list element</b>: 0.1 [mm]</li><li><strong>Another list element</strong>: 0.2</li></ul><span>span element</span>";
r = html.replace(/(<\/?span>|<\/?strong>)/g,"");
console.log(r);
,
我能想到的最好/最快的方法是,如Sven.hig所建议的那样,从输入字符串中创建一个html DOM,对其进行解析,并为要保留的所有标记获取theouterHTML,并为其他
这是一个精确地做到这一点的代码片段:
/* Input and Output strings */
let input = "<p>TEXT</p><div>container</div><p></p><ul><li><b>list element</b>: 0.1 [mm]</li><li><strong>Another list element</strong>: 0.2</li></ul><span>span element</span>";
let output = "";
/* Array of the tagNames which you want to keep */
let nonDeleatableTags = ["p","li","ul","ol","b"];
/* We retrieve every html elements in the given input string */
let allTagElements = Array.from(
new DOMParser()
.parseFromString(input,"text/html")
.getElementsByTagName("*")
).filter(element => (element.tagName != "HTML" && element.tagName != "HEAD" && element.tagName != "BODY")); //The DOMParser will give us the <html>,<head> and <body> tags which we don't use
for(const element of allTagElements) {
/* We want to avoid printing the same element twice if its a childNode */
let alreadyInspected = false;
for(const inspectedElement of allTagElements)
if(element != inspectedElement && inspectedElement.contains(element))
alreadyInspected = true;
if(!alreadyInspected)
output += (nonDeleatableTags.includes(element.tagName.toLowerCase())) ? element.outerHTML : element.innerHTML; //The .toLowerCase can be omitted if you write the nonDeleatableTags elements with the upperCase
}
console.log(input);
console.log(output);
如果要保留其他标签,只需将它们添加到nonDeleatableTags数组中就可以了!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。