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.

Problem courtesy of: Rikon


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");


Solution courtesy of: VisioN


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.

Discussion courtesy of: Mike Legacy

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(/bidb/gi, "ID");

Live example

Discussion courtesy of: Alex Turpin

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);
    t.nodeValue = t.nodeValue.replace(pattern,str);

replaceTextUnder(document.body, /bidb/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( /bidb/gi, "ID" );​

Discussion courtesy of: Phrogz

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.

Discussion courtesy of: Damien Roche

This recipe can be found in it’s original form on Stack Over Flow

责编内容来自:CSS3 Recipes (源链) | 更多关于

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Capitalize specific words on the page

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录