1

使用 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>标签，但这似乎并不重要。

4

1 回答 1

0

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

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>
于 2012-09-12T15:48:26.190 回答