【问题标题】：Automatically link URLs and images within html string自动链接 html 字符串中的 URL 和图像
【发布时间】：2011-01-26 22:01:15
【问题描述】：

你好，我有一个这样的字符串：

"<p class='video'>http://vimeo/2342343</p><p class='image'>http://nerto.it/logo.png</p><p class='text'>try to write</p><p class='video'>http://vimeo/2234923</p>"

我必须将它转换成这样的字符串：

"<p class='video'><a href='http://vimeo/2342343'>http://vimeo/2342343</a></p><p class='image'><img src='http://nerto.it/logo.png' /></p><p class='text'>try to write</p><p class='video'><a href='http://vimeo/2234923'>http://vimeo/2234923</a></p>"

那么我如何获取每个元素并对其进行转换？

谢谢

【问题讨论】：

看看临空宝石：rubygems.org/gems/rinku

标签： ruby-on-rails ruby regex

【解决方案1】：

您可以使用auto-link function 将链接转换为实际的锚标记。

自动链接（text_to_convert）

*注意：方法已弃用或移动此方法已弃用或在最新的稳定版本上移动。最后一个现有版本 (v3.0.9) 显示在链接中。

如果您有更具体的用例，您可能希望将 gsub 与正则表达式一起使用。例如：

text.gsub(/\

(.*?)\/, "

")

【讨论】：

如果有子字符串<p class='image'>http://nerto.it/logo.png</p> 我必须使用图像标签而不是链接
我修改了帖子以添加使用 gsub 的自定义示例。
我认为它已被弃用。

【解决方案2】：

html = "<p class='video'>http://vimeo/2342343</p>
        <p class='image'>http://nerto.it/logo.png</p>
        <p class='text'>try to write</p>
        <p class='video'>http://vimeo/2234923</p>"

linked = html.gsub( %r{http://[^\s<]+} ) do |url|
  if url[/(?:png|jpe?g|gif|svg)$/]
    "<img src='#{url}' />"
  else
    "<a href='#{url}'>#{url}</a>"
  end
end

puts linked
#=> <p class='video'><a href='http://vimeo/2342343'>http://vimeo/2342343</a></p>
#=> <p class='image'><img src='http://nerto.it/logo.png' /></p>
#=> <p class='text'>try to write</p>
#=> <p class='video'><a href='http://vimeo/2234923'>http://vimeo/2234923</a></p>

【讨论】：

【解决方案3】：

auto_link 函数已移至单独的 gem here

【讨论】：

【解决方案4】：

不要编写 complicated 正则表达式，而是使用 Nokogiri。下面的解决方案，将链接和图片完美转换。

需要“红宝石” 需要'nokogiri' #用你的字符串替换 str = "...." doc = Nokogiri::HTML.parse(str) video_nodes = doc.css('.video') video_nodes.each 做 |v| 内容 = v.content link_node = Nokogiri::XML::Node.new('a',doc) link_node['href'] = 内容 link_node.content = 内容 v.add_child(link_node) 结尾 img_nodes = doc.css('.image') img_nodes.each 做 |img| 内容 = img.content image_node = Nokogiri::XML::Node.new('img',doc) image_node['src'] = 内容 img.add_child(image_node) 结尾将 doc.to_html

【讨论】：

【解决方案5】：

我想建议您将所有 url 从文本转换为链接的新 gem 是 gem link_url。它也适用于没有类似宝石的 www。

gem install link_url

Example 1: 
LinkUrl.convert('hello I am on www.stackoverflow.com')
Result => hello I am on <a href='http://www.stackoverflow.com'>www.stackoverflow.com</a>
Example 2:
LinkUrl.convert('hello I am on www.stackoverflow.com and my blog is http://www.clecotech.in')
Result => hello I am on <a href='http://www.stackoverflow.com'>www.stackoverflow.com</a> and my blog is <a href='http://www.clecotech.in'>http://www.clecotech.in</a>

【讨论】：

【解决方案6】：

试试这个简单的最佳 gem 将文本或字符串中的所有 url 转换为链接。它还将图片网址转换为图片标签。

宝石安装url_link

string =  "Welcome to my website http://www.mywebsite.com"
url_link(format(string))
result => welcome to my website <a href='http://www.mywebsite.com'>http://www.mywebsite.com</a>

image_string = "http://blogspot.com/images/screenshot.png"
url_link(format(image_string))
result => <img src="http://blogspot.com/images/screenshot.png"/>

string = "Welcome to my website http://www.mywebsite.com see the picture http://media.smashingmagazine.com/images/introduction-to-rails/rails.jpg"
url_link(format(string))
result => welcome to my website <a href='http://www.mywebsite.com'>http://www.mywebsite.com</a>see the picture <img src="http://media.smashingmagazine.com/images/introduction-to-rails/rails.jpg"/>

或者再试试这个

帮手

def proper_url_link(url_link)
  unless url_link.blank?
   url_link.gsub( %r{(http|https)://[^\s<]+} ) do |url|
      if url[/(?:png|jpe?g|gif|svg)$/]
        "<img src='#{url}' />"
      else
        "<a href='#{url}' target='_blank'>#{url}</a> "
      end
    end
  end
end

def proper_html(html_format)
  unless html_format.blank?
    html_format.html_safe
  end
end

View

html = "<p class='video'>http://www.vimeo.com/2342343</p>

<=proper_html(proper_url_link(html))%>

【讨论】：