LEoREo_2247 LEoREo_2247 - 5 months ago 9
Ruby Question

add <a> tag to all items in hash - Ruby on Rails

This is continuation from This one. Read following question&comments first before looking at this one.

I have following Replacement(Hash) below for switching text on html that I've got from desired url of website using open-uri library.

replacements = {'1杯の'=>'a cup of','たくさん'=>'a lot','たくさんの'=>'a lot of','1週間'=>'a week','午前'=>'a.m.','およそ'=>'about','住所'=>'adress','大人'=>'adult','アフリカ'=>'Africa',‌​'の後で'=>'after','のあとで'=>'after','午後'=>'afternoon','再び'=>'again','ふたたび'=>'again','空‌​港'=>'airport','全て'=>'all','一日中'=>'all day','1日中'=>'all day','いつも'=>'always'...}


And I want to add
<a>
tag to all english word at hash above, which is linked to online Japanese-English Dictionary service called "Weblio"

Weblio's url format is like this:
http://ejje.weblio.jp/{desired english word}


so that
<a>
tag which should be added to all english word should be like below.

<a href="http://ejje.weblio.jp/{desired english word}">DESIRED+ENGLISH+WORD</a>


Any way to do the easily? I just started learning Ruby on Rails recently, so it would be nice to have detailed and simple explanation for it with some examples.

EDIT

def submit
require 'uri'
require 'open-uri'
require 'nokogiri'

charset = nil
@html = open(params[:url]) do |f|
charset = f.charset
f.read
end

replacements = {'1杯の'=>'a cup of','たくさん'=>'a lot'...}
regex = Regexp.new(replacements.keys.map { |x| Regexp.escape(x) }.join('|'))
@html = Nokogiri::HTML::DocumentFragment.parse(@html)
@html.traverse do |x|
if x.text?
x.content = x.content.gsub(regex, replacements)
end
end
end


EDIT2:

I have a problem, which all
<a>
tag replaced actually displays as a part of
<p>
tag and not linking. How I can escape
<a>
tag form
<p>
?

EDIT3:

This is what actually happening.
https://techacademy-leoreo2247.c9users.io/result/?utf8=%E2%9C%93&url=https%3A%2F%2Fringo-12.com%2F
inspect element on
<a href="http://..../content/windows">windows</a>
for more details

EDIT4:

Seems like it has different problem.
When I inspected element on my app, the code it should display like
Windows
is displaying like
&lt;a href="http://ejje.weblio.jp/content/Windows"&gt;Windows&lt;/a&gt;
.

I guess the code "Windows"is encoded to some other format.

Answer

Weblio's url format is like this: http://ejje.weblio.jp/{desired english word}

Well, not quite: you can't have spaces in a url, so you have to do something extra to a phrase like "a lot of".

In rails, by default you use something called ERB to substitute values into a view. ERB allows you to write ruby code in your html and execute it. All your view files have the extension .html.erb--that is a hint that rails first runs your views through the ERB templating engine to produce the .html files. So, you need to read a tutorial on ERB syntax, such as this one. Here is an example of what ERB looks like:

<% 
  replacements = {
      '1杯の'=>'a cup of',
      'たくさん'=>'a lot',
      'たくさんの'=>'a lot of',
  }

  replacements.values.each do |phrase| %>
    <a href="http://ejje.weblio.jp/<%= URI.escape(phrase) %>"><%= phrase %></a>
  <% end %>

A <%= .... %> block inserts the results of the ruby code contained in the block into the html.
A <% ..... %> block is for ruby code that you want to be executed but whose results are not to be inserted into the html.

If you create your replacements in an action, e.g.:

def dostuff
  @replacements = {
    ...
  }
end

then your view would simply look like this:

  <% @replacements.values.each do |phrase| %>
    <a href="http://ejje.weblio.jp/<%= URI.escape(phrase) %>"><%= phrase %></a>
  <% end %>

Below is an example that demonstrates the use of the ERB templating engine outside of rails.

require 'erb'
require 'uri'

template = %q{ #=> Another way in ruby to write an opening single quote for a string.
<% 
  replacements = {
    '1杯の'=>'a cup of',
    'たくさん'=>'a lot',
    'たくさんの'=>'a lot of',
  }

  replacements.values.each do |phrase| %>
    <a href="http://ejje.weblio.jp/<%= URI.escape(phrase) %>"><%= phrase %></a>
  <% end %>
}  #=>Closing single quote for the string

renderer = ERB.new(template)
result = renderer.result()
puts result

--output:--
<a href="http://ejje.weblio.jp/a cup of">a cup of</a>

<a href="http://ejje.weblio.jp/a lot">a lot</a>

<a href="http://ejje.weblio.jp/a lot of">a lot of</a>

In rails, you don't need to write the require or ERB.new() or renderer.result()--rails does all that automatically for an .html.erb file

Once you write a few views using ERB, and you feel comfortable with the basics, you can promptly forget about ERB and use one of the better templating languages, like slim, which is much prettier and easier to type than ERB. Rails has the means for incorporating any templating engine of your choice--but the default is ERB.

Response to comment:

 def dostuff

    replacements = {
      '1杯の'=>'a cup of',
      'たくさん'=>'a lot',
      'たくさんの'=>'a lot of',
    }

    replacements.each do |key, val|
      replacements[key] = %Q{<a href="http://ejje.weblio.jp/#{URI.escape(val)}">#{val}</a>}
    end

    require 'pp'  #pretty print
    pp replacements

  end

Output in server window:

{"1杯の"=>"<a href=\"http://ejje.weblio.jp/a%20cup%20of\">a cup of</a>",  
 "たくさん"=>"<a href=\"http://ejje.weblio.jp/a%20lot\">a lot</a>",  
 "たくさんの"=>"<a href=\"http://ejje.weblio.jp/a%20lot%20of\">a lot of</a>"}

Response to comment:

Your str is html escaped. When you want to literally display all the characters in the string <a>hello</a> on a web page, you must escape the angle brackets or else the browser will think it is an <a> tag and render it as a link.

require 'cgi'

str = %q{<a href="http://ejje.weblio.jp/content/Windows">Windows</a>}

puts "<div>This is an html instruction site.  First we will start with link tags.</div>"
puts "<div>Link tags look like this:</div>"
puts "<div>#{CGI.escapeHTML str}</div>"

str = %q{&lt;a href="http://ejje.weblio.jp/content/Windows"&gt;Windows&lt;/a&gt;}

puts "<div>Here is a link to the W3.org website for the docs on link tags:</div>"
puts "<div>#{CGI.unescapeHTML str}</div>"

--output:--
<div>This is an html instruction site.  First we will start with link tags.</div>
<div>Link tags look like this:</div>
<div>&lt;a href=&quot;http://ejje.weblio.jp/content/Windows&quot;&gt;Windows&lt;/a&gt;</div>
<div>Here is a link to the W3.org website for the docs on link tags:</div>
<div><a href="http://ejje.weblio.jp/content/Windows">Windows</a></div>

If you take the output of that program and open it in a browser, you will see:

This is an html instruction site. First we will start with link tags.
Link tags look like this:
<a> href="http://ejje.weblio.jp/content/Windows">Windows</a>
Here is a link to the W3.org website for the docs on link tags:
Windows

Comments