CODEWITHSUNDEEP
jquerycssruby-on-railsstring
twinturbotom
twinturbotom

Reputation: 1544

Manipulate characters of Ruby on Rails string variable with jQuery and CSS

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.

Thanks.

Upvotes: 0

Views: 315

Answers (2)

weexpectedTHIS
weexpectedTHIS

Reputation: 3376

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

$(document).ready(function(){
  $('h2').html(
    $('h2').html().replace(/mpany/, '<em>mpany</em>').replace(/Name/, '<em>Name</em>')
  );
});

Upvotes: 2

Eugene Dorian
Eugene Dorian

Reputation: 917

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

Upvotes: 3

Related Questions