我们可以使用hpricot gem抓取html元素并添加css吗

Question

最初，我有一个html和文本内容的字符串。

我想从上面的字符串中为某些html元素添加css样式。如何使用hpricot gem实现这一点？我能够通过使用each循环来废弃html元素。但我该怎么做呢？

例如，我有以下字符串：

"<pre>//code snippet 1</pre><p>Table:</p><table><tbody><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></tbody></table>"

然后，我可以使用访问所有td元素

string.search("//td").each do |ele|
  //some code needed to add css to ele
end

Answer 1

Hpricot已被放弃，因此您最好使用例如Nokogiri。

我用野村做了这个例子。可以使用[]=方法向节点添加任意属性。我们使用它来添加一个style属性。

require 'nokogiri'
my_string_fragment = 
  "<pre>//code snippet 1</pre><p>Table:</p>
  <table>
    <tbody>
      <tr>
        <td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td>
      </tr>
    </tbody>
  </table>"
html_fragment = Nokogiri::HTML::DocumentFragment.parse(my_string_fragment)
html_fragment.css("td").each do |cell|
  cell["style"] = "color: red"
end
puts html_fragment
# Prints this:
#
# <pre>//code snippet 1</pre><p>Table:</p>
# <table>
#   <tbody>
#     <tr>
#       <td style="color: red">1</td>
#       <td style="color: red">2</td>
#       <td style="color: red">3</td>
#     </tr>
#     <tr>
#       <td style="color: red">4</td>
#       <td style="color: red">5</td>
#       <td style="color: red">6</td>
#     </tr>
#   </tbody>
# </table>

我使用了DocumentFragment，因为否则Nokogiri将通过添加html标记来确保我们的片段成为完整的HTML文档。

请记住，添加这样的内联CSS样式被认为是不好的做法。

Answer 2

我没有使用hpricot或nokogiri，而是找到了一种更好/更干净的方法来实现我想要的。我用了预制铁轨宝石。它需要使用nokogiri或hpricot宝石。但我们所需要做的就是添加这个gem，它会自动将外部css转换为内联css。

参考gem：预制机轨道