javascript - 将页面上的特定单词大写

Question

我有您的典型 MVC3 应用程序，其中包含大量 CRUD 页面。在这些页面中，有很多带有 Id 列的列表......客户今天告诉我，他们总是希望看到“ID”而不是“Id”，但这些字段通常更完全合格（IE：“Job Id”或某物）

有没有办法使用css仅对文本的“Id”部分进行文本转换（全部大写）而不添加任何额外的html？

我认为部分解决方案涉及这个伪类： div:contains(" Id ") 但我不确定它是否可行......

我也不介意用 jquery 做这个，但我试图尽量减少重构。

Answer 1

根据其他答案，这里是带有有效替换的简短版本：

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

演示：http: //jsfiddle.net/bcAyP/

Answer 2

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

Answer 3

您不能将 CSS 样式应用于单个单词，只能应用于元素。这意味着您需要有额外的 HTML。否则，它可以在 jQuery 中完成。

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

活生生的例子

Answer 4

要对抗内部匹配，请使用以下内容：

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

这当然假设 id 总是大写，如您的描述。

Answer 5

http://jsfiddle.net/HZVs8/

给你，先生。

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

您需要注意的是，您必须确保“id”在 jQuery 中之前有一个空格，否则，此代码将查找每个包含“id”的文本字符串并对其进行转换到“身份证”。

如果您遇到的问题是文本是这样的：“ProjectId”并且您希望它是这样的：“ProjectID”，请使用以下代码：

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

基本上，您选择的文本区分大小写。只需确保您选择了正确的片段，否则它可能会选择带有“id”的每个单词并将其设为“ID”，而您不希望这样。

弄乱我制作的 JSFiddle。有用。