如何使用 javascript 关闭 <img> 标签？答案

【问题标题】：How to close <img> tags using javascript?如何使用 javascript 关闭 <img> 标签？
【发布时间】：2017-12-06 16:27:56
【问题描述】：

我有一个 html 字符串示例如下：

html = "<html><body><img src = "" style = ""></body></html>

我怎样才能实现以下目标：

html = "<html><body><img src = ""  style = ""></img></body></html>

我想关闭标准 XHTML 格式的图像标签。将不胜感激任何建议。谢谢

【问题讨论】：

你试过什么？你被困在哪里了？ Stack Overflow 不是免费的代码编写服务，请展示您的代码/努力以及实际问题所在。
@Clijsters 当然他们不一样。这个问题很不清楚； “用 JavaScript 关闭标签”的概念很奇怪，我的评论是希望从 OP 中获得更多信息。
@Pointy: :-)
@ChhaviC。 — 这是否意味着您要问的问题是“我有一个包含 HTML 的字符串并希望将其转换为 XHTML？”
"Flying Saucer 是一个纯 Java 库" — 我会忘记尝试在 JS 中执行此操作并找到可以序列化为 XHTML 的 Java HTML 解析器（然后将生成的 XHTML 传递给FS）。

标签： javascript html image

【解决方案1】：

不清楚您的问题是什么。我以一种方式阅读它，但我认为昆汀是对的，我应该以另一种方式阅读它。

我的阅读方式

...您是否想知道如何在 XHTML 中编写 img 标签。

我想关闭标准 XHTML 格式的图像标签。

在 XHTML 中，void elements 和 img 一样是用斜线 (/) 编写的，在标签中 > 前面有一个空格：

html = '<html><body><img src = ""  style = "" /></body></html>';
// ------------------------------------------^^

（注意我将外部引号更改为'，所以这将是一个语法有效的字符串。）

由于 XHTML 是 XML 和 the spec doesn't impose any further syntax restrictions over XML's own，因此您大概也可以写成 <img ...></img>。但是，XHTML 1 规范 says you should use <img ... /> instead 因为 “...不确定会导致许多现有的用户代理。”

在 HTML（不是 XHTML）中执行<img ... /> 的事情是可以容忍的，但没有必要。 <img src = "" style = ""> 在 HTML 中是完全正确的。（请注意，这仅适用于 void 元素。XHTML <div /> 在 HTML 中正确书写为 <div></div>，因为 div 不是 void 元素；<div /> 将被视为与 HTML 中的 <div> 完全相同。）

或者你的意思是……

...您有一个包含 HTML 的字符串，并希望将其修改为 XHTML。如果是这样，您想使用 HTML 解析器来解析字符串，然后使用 XHTML 序列化器将其转回字符串。

【讨论】：

感谢您的回答。我必须使用 Flying Saucer 渲染 PDF，它会搜索所有元素的开始和结束标签。如果您能提出一些建议，那就太好了。
@ChhaviC.：我做到了：<img .../> 是正确的 XHTML，<img ...> 是正确的 HTML。如果这个“飞碟”需要<img ...></img>，那它根本就坏掉了，我建议不要使用它。
@T.J.Crowder — 看起来 Flying Saucer 旨在处理 XML 并接受 XHTML 作为其子集。 <img ...></img> 是非常好的 XHTML，只是它不是与 HTML 兼容的 XHTML。据我所知，FS 会接受<img/> 和<img></img>。
@Quentin：如果它接受 XML，那么它应该接受 <img .../>。（你确定<img></img> 是有效的 XHTML 吗？）
@T.J.Crowder — 是的，Appendix C 禁止非最小化表单作为 HTML 兼容 XHTML 的附加要求。

【解决方案2】：

不需要结束 img 标签，因为它是一个 void 元素。

eg:-

<img src="smiley.gif" alt="Smiley face">

参考：https://www.codecademy.com/en/forum_questions/51ffd01c80ff33d5ba007c7c

【讨论】：