Reputation: 2706
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
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);
});
Upvotes: 2
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:
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
Reputation: 1066
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
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
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