Take the 2-minute tour ×

I want grab specific characters of a string (stored as a ruby on rails global variable) and modify their appearance while adding a little animation through jquery... This is easily achievable without calling the variable and having html tags wrapping around the specific characters I want to grab; or maybe by storing the wrapped tags in the variable. But i can't help but think there is a more elegant solution that allows me to call my variable and manipulate it for this specific instance...

Here's an example that may help describe the situation.

I have a global variable "coName" where I can store the string of the companies name the site is for; making it easy to reuse in different locations and update for other sites. Using some simple embedded ruby it's easy to call that string wherever it's needed... for example a simple company name in h1 elements:

<h1><%=h coName %></h1>

produces the following (if of course the coName value is "Company Name")

<h1>Company Name</h1>

Now I simply want the characters "mpany" to be a different color (also doing some jQuery fadeIn and fadeOut animation on those characters) and "Name" to be on a different line indented a few charters over.

Again ... this is trivial. If I scrap the call to the variable and mark it up all ugly like:

<h1>Co<span>mpany</span><br /><span>Name</span></h1>

then I can easily use CSS and jQuery selectors to change colors, animate, and indent ... but that is not elegant, probably not as SEO friendly, or modular as calling the "coName" variable and modifying it. Right now I'm playing substring methods in jQuery but haven't found an adequate solution when calling the global variable.

I'm looking for any possible solutions you net experts can offer.


share|improve this question
company name is variable, or there is a pattern like 'Company A', 'Company B'. –  Paritosh Singh Sep 12 '12 at 16:21
coName variable can change –  twinturbotom Sep 12 '12 at 16:42
add comment

2 Answers

up vote 3 down vote accepted

I guess the highlight method is what you are looking for.

highlight('You searched for: rails', ['for', 'rails'], :highlighter => '<em>\1</em>')
# => You searched <em>for</em>: <em>rails</em>

Read more here: http://api.rubyonrails.org/classes/ActionView/Helpers/TextHelper.html#method-i-highlight

share|improve this answer
This answer is not SEO friendly as you mentioned in your question. –  weexpectedTHIS Sep 12 '12 at 16:45
I think that's it! I appreciate the elegant solution and quick response. I'm having a little issue indenting the second highlighted string but with more reading and playing I think it'll work. I either need to have it highlight the "name" with a different highlighter than the "mpany" or just use a different selection method. Thanks a bunch! –  twinturbotom Sep 12 '12 at 16:46
will splicing the string with <span> elements to manipulate decrease SEO? Maybe i can splice with another type of element that won't hurt SEO as much? –  twinturbotom Sep 12 '12 at 16:48
add comment

The way to make it SEO friendly would be to use javascript to manipulate the dom after load. Something like this:

    $('h2').html().replace(/mpany/, '<em>mpany</em>').replace(/Name/, '<em>Name</em>')
share|improve this answer
I like the post load DOM manipulation here! I haven't tried it yet but it looks good. Thanks! –  twinturbotom Sep 13 '12 at 17:17
add comment

Your Answer


