<source> 在Nokogiri中创建没有结束标记的元素

使用Nokogiri，我手动创建<video>和<source>标记。我的代码如下：

mp4_source_tag = html.create_element('source')
tag.replace(mp4_source_tag)          
mp4_source_tag['type'] = 'video/mp4'
mp4_source_tag['src'] = video.mp4_video.url

它生成以下HTML：

<source type="video/mp4" src="/system/mp4_videos/1/original/trailer.mp4?1347088365"></source>

然而，这是无效的HTML5。正确的输出应该是：

<source type="video/mp4" src="/system/mp4_videos/1/original/trailer.mp4?1347088365">

如何使用Nokogiri在没有关闭</source>标记的情况下输出有效的HTML5？

被替换的标签是<img>标签，但这似乎无关紧要。

如果您将文档创建为XML而不是HTML，Nokogiri将输出带有斜杠的空元素，例如<source />；这对HTML5有效。

html = Nokogiri.HTML('')
puts html.create_element('source')
#=> <source></source>
xml = Nokogiri.XML('')
puts xml.create_element('source')
#=> <source/>

然而，这样做的缺点是，将有效的HTML5文档解析为XML会导致解析错误：

require 'nokogiri'
html5 = '<!DOCTYPE html>
  <html><head>
    <meta charset="utf-8">
    <title>Test</title>
  </head><body>
    <img src="a.jpg"><img src="b.jpg">
  </body></html>'
doc = Nokogiri.XML( html5, &:noblanks )
puts doc
#=> <?xml version="1.0"?>
#=> <!DOCTYPE html>
#=> <html>
#=>   <head>
#=>     <meta charset="utf-8">
#=>       <title>Test</title>
#=>     </meta>
#=>     <body>
#=>       <img src="a.jpg">
#=>         <img src="b.jpg">
#=>   </img>
#=>       </img>
#=>     </body>
#=>   </head>
#=> </html>

要解决这个问题，您需要通过自动关闭void元素（这对HTML5也有效）来使源代码成为有效的XML。此外，为了避免XML声明，您需要分别序列化DTD和根：

require 'nokogiri'
html5 = '<!DOCTYPE html>
  <html><head>
    <meta charset="utf-8"/>
    <title>Test</title>
  </head><body>
    <img src="a.jpg"/><img src="b.jpg"/>
  </body></html>'
doc = Nokogiri.XML( html5, &:noblanks )
puts doc.children.map(&:to_s)
#=> <!DOCTYPE html>
#=> <html>
#=>   <head>
#=>     <meta charset="utf-8"/>
#=>     <title>Test</title>
#=>   </head>
#=>   <body>
#=>     <img src="a.jpg"/>
#=>     <img src="b.jpg"/>
#=>   </body>
#=> </html>

相关内容

最新更新

热门标签：