CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rikon
Rikon

Reputation: 2706

Capitalize specific words on the page

I have your typical MVC3 app with lots of CRUD pages. And in these pages there are lots of lists with Id columns... The client told me today that they always want to see "ID" instead of "Id" but the fields are usually more fully qualified (IE: "Job Id" or something)

Is there a way, with css, to text transform ONLY the "Id" part of the text (to all caps) without adding any extra html?

I think part of the solution involves this pseudo class: div:contains(" Id ") but I'm not sure if it's even do-able...

Also I don't mind doing this w/ jquery, but I'm trying to minimize refactoring.

Upvotes: 3

Views: 745

Answers (5)

Alex Turpin
Alex Turpin

Reputation: 47776

You can't apply a CSS style to a single word, only to elements. This means that you'll need to have additional HTML. Otherwise, it can be done in jQuery.

$("h3").each(function() {
    var title = $(this).text();
    title = title.replace(/\bid\b/gi, "ID");
    $(this).text(title);
});

Live example

Upvotes: 2

Phrogz
Phrogz

Reputation: 303559

You cannot apply CSS to specific words, only elements (or the small set of pseudo-elements defined by CSS). Here's a JavaScript-based solution that never affects your markup:

Demo: http://jsfiddle.net/6LRWC/2/

function replaceTextUnder(node,pattern,str){
  var t, walk=document.createTreeWalker(node,NodeFilter.SHOW_TEXT,null,false);
  while(t=walk.nextNode()){
    t.nodeValue = t.nodeValue.replace(pattern,str);
  }
}

replaceTextUnder(document.body, /\bid\b/gi, "ID" );

Alternatively, here it is wrapped up as a jQuery plugin:

jQuery.fn.replaceInText = function(pattern,str){
  return this.each(function(){
    var t, walk=document.createTreeWalker(this,NodeFilter.SHOW_TEXT,null,false);
    while(t=walk.nextNode()) t.nodeValue = t.nodeValue.replace(pattern,str);
  });
};

$('li,td,th').replaceInText( /\bid\b/gi, "ID" );​

Upvotes: 2

Mike Legacy
Mike Legacy

Reputation: 1066

http://jsfiddle.net/HZVs8/

Here you go sir. 

$("body").html(function(i, t) {
return t.replace(/( id)/g, " ID");
});​

What you have to watch out for with this, is that you have to make sure the "id" has a space before it in the jQuery, otherwise, this code with find EVERY string of text that has "id" in it an convert it to "ID".

If if the issue you are having is that the text is like this: "ProjectId" and you want it like this: "ProjectID" then use this code: 

$("body").html(function(i, t) {
return t.replace(/(Id)/g, " ID");
});

Basically, the text you are selecting is case sensitive. Just make sure you are selecting the right snippet or it may select every word with "id" and make it "ID" and you don't want that.

Mess around with the JSFiddle I made. It works.

Upvotes: -1

user419017
user419017

Reputation:

To combat the inner matches, use something like this:

$("h3").each(function() {
    $(this).text($(this).text().replace(/\sId/g, "ID"));
});​

This of course assumes that id is always capitalized as in your description.

Upvotes: 0

VisioN
VisioN

Reputation: 145478

Based on the other answers here is the short version with valid replacement:

$("h3").text(function() {
    return $(this).text().replace(/\b(id)\b/gi, "ID");
});​

DEMO: http://jsfiddle.net/bcAyP/

Upvotes: 3

Related Questions