使用 Ruby 从 :colons: 中的图像创建 HTML 链接

Question

我有一个简单的HTML文档：

<div should-not-be-replaced=":smile:">
  Hello :smile:!
</div>

如何将 :smile: 文本替换为 <img src="smile.png">，但保持第一个 :smile: 不变，以获得此内容：

<div should-not-be-replaced=":smile:">
  Hello <img src="smile.png">!
</div>

我试过了，但是 Nokogiri 将我的 HTML 转义为纯文本：

doc = Nokogiri::HTML::DocumentFragment.parse(html)
doc.traverse do |x|
  next unless x.text?
  x.content = x.text.gsub(':smile:', '<img src="smile.png">')
end

Answer 1

你是认真的 returns &lt 还是 &gt?

我建议包装 CGI#unescape_html 方法

尝试，

require 'cgi'
CGI::unescape_html(doc.to_s)

Answer 2

我认为这可能是您想要的，它还处理两个冒号之间的字符串，例如 :something: 并生成 "something.png"。

doc = Nokogiri::HTML::DocumentFragment.parse(html)
doc.traverse do |x|
  if x.text? && x.content =~ /:\w+:/
    x.content = x.content.sub(/:(\w+):/, '')
    a = Nokogiri::HTML::DocumentFragment.parse('<a src="'++'.png">')
    x.add_next_sibling(a)
  end
end

Answer 3

我的解决方案与 Ku 的解决方案非常相似，尽管我试图通过用 HTML 文档片段

doc = Nokogiri::HTML::DocumentFragment.parse(DATA.read)
doc.traverse do |x|
  next unless x.text?
  if x.text.match(%r{:(\w+):})
    replace_text = x.text.gsub(%r{:(\w+):}, "<img src='#{}.png'>")
    x.content = ""
    x.add_next_sibling replace_text
  end
end

Answer 4

你让它变得太难了，而且使用 traverse 很慢，因为它迫使 Nokogiri 遍历文档中的每个节点；在昂贵的大页面中。

而是利用选择器来查找您想要的特定节点：

require 'nokogiri'

doc = Nokogiri::HTML(<<EOT)
<div parm=":smile:">
  Hello :smile:!
</div>
EOT

div = doc.at('div[parm=":smile:"]') 
div.inner_html = div.text.sub(/:smile:/, '<img src="smile.png">')
puts doc.to_html

运行结果：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body>
<div parm=":smile:">
  Hello <img src="smile.png">!
</div>
</body></html>

我正在使用 at，它会找到第一个匹配项。如果您需要处理多个，则使用 search。 search returns 一个 NodeSet，它类似于一个数组，因此您需要对其进行迭代。在 Stack Overflow 和其他地方，这样做的例子数不胜数。

使用 Ruby 从 :colons: 中的图像创建 HTML 链接

Creating HTML links from images in :colons: with Ruby

html

ruby

nokogiri