Rails 4: how to identify and format links, hashtags and mentions in model attributes?

Tags: css,ruby-on-rails,regex,ruby-on-rails-4,hashtag

Problem :

In my Rails 4 app, I have a Post model, with :copy and :short_copy as custom attributes (strings).

These attributes contain copies for social medias (Facebook, Twitter, Instagram, Pinterest, etc.).

I display the content of these attributes in my Posts#Show view.

Currently, URLs, #hashtags and @mentions are formatted like the rest of the text.

What I would like to do is to format them in a different fashion, for instance in another color or in bold.

I found the twitter-text gem, which seems to offer such features, but my problem is that I do NOT need — and do NOT want — to have these URLs, #hashtags and @mentions turn into real links.

Indeed, it looks like the twitter-text gem converts URLs, #hashtags and @mentions by default with Twitter::Autolink, as explained in this Stack Overflow question.

That's is not what I am looking for: I just want to update the style of my URLs, #hashtags and @mentions.

How can I do this in Ruby / Rails?



Following Wes Foster's answer, I implemented the following method in post.rb:

def highlight(string)
  string.gsub!(/\S*#(\[[^\]]+\]|\S+)/, '<span class="highlight">\1</span>')

Then, I defined the following CSS class:

.highlight {
    color: #337ab7;

Last, I implemented <%= highlight(post.copy) %> in the desired view.

I now get the following error:

wrong number of arguments (1 for 2..3)
<td><%= highlight(post.copy) %></td>

What am I doing wrong?


Solution :

I'm sure each of the following regex patterns could be improved to match even more options, however, the following code works for me:

def highlight_url(str)
    str.gsub!(/(https?:\/\/[\S]+)/, '[\1]')

def highlight_hashtag(str)
    str.gsub!(/\S*#(\[[^\]]+\]|\S+)/, '[#\1]')

def highlight_mention(str)
    str.gsub!(/\B(\@[a-z0-9_-]+)/i, '[\1]')

# Initial string
str = "Myself and @doggirl bought a new car: http://carpictures.com #nomoremoney"

# Pass through each

puts str   # > Myself and [@doggirl] bought a new car: [http://carpictures.com] [#nomoremoney]

In this example, I've wrapped the matches with brackets []. You should use a span tag and style it. Also, you can wrap all three gsub! into a single method for simplicity.

Updated for the asker's add-on error question

It looks like the error is references another method named highlight. Try changing the name of the method from highlight to new_highlight to see if that fixes the new problem.

    CSS Howto..

    how to get this modal window to work correctly?

    How to add offset border to image of unknown size?

    How to change css for each additional innerHTML element in a javascript for loop

    How to write this 'OR' CSS selector?

    CSS - How to set an elements height as a % of a container with auto height?

    how do i place text opposite to Anchor Tag Using CSS [closed]

    How to edit HTML with CSS? [closed]

    How to apply texture to text with a shadow

    Hiding and showing web element with CSS in dart?

    How to make a img flicker using css(should work in all browsers)

    How do i add a fading border to my nav bar CSS

    How to color my sidebars after centering my website

    How to target the text in an element but not the text in nested elements with CSS

    How Do I Perfectly Center a Float Element in Between Two Floated Elements?

    how can I make my navbar scroll smoothly to the top on page click

    How to achieve a “mini” select style using Bootstrap (or straight CSS)?

    how to verify “Cache-Control”, “no-cache, no-store, must-revalidate”

    How to make space between menu items in CSS/HTML

    Preload all CSS images while showing a preloader

    How to make Wrapper div contain only non-overflowing divs

    How to automatically choose which css to use depending on the URL/website and/or server I'm on?

    How to create custom horizontal radio buttons with CSS?

    With html tables, using CSS, how do I get the tables next to each other?

    How can I use Modernizr to get border-radius working in IE8?

    How can I change the css of this when I click on anything but this?

    How to set height and width of video element in percent

    How to get started with Blueprint [CSS Framework]?

    How to keep images fixed but also responsive so they don't overlap

    How to make custom css fonts render exactly like designs

    How to vertical-align to x-height?