Automatically link URLs and images within html string

Question

Hi i have a string like this:

"<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>"

i have to transform it in a string like this:

"<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>"

so how i can get every element and transform it?

thanks

Take a look at the Rinku gem: https://rubygems.org/gems/rinku — svoop, Dec 13 '16 at 15:08

score 6 · Answer 1 · edited Jun 08 '16 at 20:15

6

You can use the auto-link function to convert links into actual anchor tags.

auto_link(text_to_convert)

*Notice: Method deprecated or moved This method is deprecated or moved on the latest stable version. The last existing version (v3.0.9) is shown in the link.

If you have more specific use cases you'll probably want to use gsub with a regular expression. For example:

text.gsub(/\<p\s+class=\'image\'\>(.*?)\<\/p\>/, "<p class='image'><img src='\\1' /></p>")

edited Jun 08 '16 at 20:15

Jax

1,839
3
18
30

answered Jan 26 '11 at 22:07

Pan Thomakos

34,082
9
88
85

if there is the substring `
http://nerto.it/logo.png
` i have to use a image tag and not the link – Luca Romagnoli Jan 26 '11 at 22:10
I modified the post to add custom examples using gsub as well. – Pan Thomakos Jan 26 '11 at 22:24
I think it's deprecated. – Lee Han Kyeol Jan 07 '15 at 08:38

score 5 · Answer 2 · answered Oct 15 '12 at 18:54

5

The auto_link function has been moved to a separate gem here

answered Oct 15 '12 at 18:54

Pratik Khadloya

12,509
11
81
106

score 5 · Accepted Answer · answered Jan 26 '11 at 22:16

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>

score 2 · Answer 4 · answered Jan 26 '11 at 22:24

Instead of writing complicated regex, use Nokogiri. The solution below,will convert the links and images perfectly.

require 'rubygems'
require 'nokogiri'

#replace with your string
str = "...."

doc = Nokogiri::HTML.parse(str)
video_nodes = doc.css('.video')
video_nodes.each do |v|
  content = v.content
  link_node = Nokogiri::XML::Node.new('a',doc)
  link_node['href'] = content
  link_node.content = content 
  v.add_child(link_node)
end

img_nodes = doc.css('.image')

img_nodes.each do |img|
  content = img.content
  image_node = Nokogiri::XML::Node.new('img',doc)
  image_node['src'] = content
  img.add_child(image_node)
end
puts doc.to_html

Marcelo Austria · Answer 5 · 2014-01-10T09:53:59.093

Try this simple best gem convert all the url from the text or string into the links. It also convert image url to image tag.

gem install 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"/>

Or try this another one

Helper

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))%>

score 0 · Answer 6 · edited Jun 20 '20 at 09:12

The new great gem I wants to suggest you for converting all the url from the text into the links is gem link_url. It also works for www where no gem is available like that.

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>

Automatically link URLs and images within html string

6 Answers6

gem install url_link

gem install link_url

Linked