如何用javascript解析html判断该元素最后有没有加上 / >

发布于 2022-09-05 04:33:32 字数 1009 浏览 42 评论 0

希望能够利用javascript解析html字串,判断所有的<img>元素,如果结尾有加上/>,就像是<img />的话,就删除。
假设现在有一组字串:

<h1>h1</h1>
<img id="a" src="https://placehold.it/200x200" alt="" />
<h2>h2</h2>
<img id="b" src="https://placehold.it/200x200" alt="">

希望能够改为

<h1>h1</h1>
<img id="a" src="https://placehold.it/200x200" alt="">
<h2>h2</h2>
<img id="b" src="https://placehold.it/200x200" alt="">

我尝试使用jquery做判断,发现读入jquery时,似乎好像已经被标准化了,无法从jquery对象中判断原本的img tag 的html。

html

<img id="a" src="https://placehold.it/200x200" alt="" /> 
<img id="b" src="https://placehold.it/200x200" alt="">

javascript

console.log($("#a"));
console.log($("#b")); 

两个打印出来的元素是一模一样的。

在python中的beautifulSoup和tag中,有个接口叫做isSelfClosing正是我需要的,请问这个在javascript有类似的库和接口吗?我找了jquery和cheerio的文档都没找到

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

怪我太投入 2022-09-12 04:33:32

这样可以实现,你复制到浏览器试试,可能不一定能达到你想要的效果,不过可以做到你说的那样.

document.body.innerHTML.match(/(<img.*?>)/mg).map((item)=> item.replace(/(?=.*?)\/>$/, '>'))

将原 HTML 中不合规的 img 标签全部替换

'原 HTML'.replace(/(<img.*?>)/mg, (item) => item.replace(/(?=.*?)\/>$/, '>'))

经@tengqingya提醒,修改了一下

原答案

document.body.innerHTML.match(/(<img.*?>)/mg).map((item)=> item.replace(/(?=.*?)\/?>$/, '')+'>')
或十年 2022-09-12 04:33:32

JS 应该无法通过 DOM 判断,只能通过字符串匹配了。

但你无需判断是不是,全都获取 outerHTML 就可以得到没有 self-closing 的标签。

反过来如果需要都加上的可以参考

var XMLS = new XMLSerializer(); 
XMLS.serializeToString(el)
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文