使用CSS和jQuery将ALL CAPS转换为Proper Case

时间:2013-02-28 02:33:52

标签: jquery css

我正在尝试做类似于此线程的事情https://stackoverflow.com/a/3471258/2117845 而且我想我想要像Harmen一样发布jquery代码并说它现在是一个插件?

我所拥有的是来自数据库的所有CAPS标题。例如:

快速的布朗福克斯正在关注跳跃的目标

我想看起来像:

快速布朗福克斯即将跳过篱笆

那么有没有办法用CSS和jQuery来转换文本并消除某些单词变成正确的案例?但我想我需要保留第一个实例。就像我删除了“the,is,to,and”然后标题中的第一个“the”将全部小写。那么,只有当它不是第一个词时,我才能以某种方式消除这些常用词吗?

我知道这很多,但我对jQuery并不是很熟悉。是否有任何教程或插件可以显示如何执行此类操作。我已经看到很多关于如何转换ALL CAPS文本的问题,因此解决方案可能非常有用。

2 个答案:

答案 0 :(得分:5)

我修改了Greg Dean's answer in a related question.

中的代码

我认为这个算法最好是一个有根据的猜测,因为它实际上并没有评估英语大小写规则。您可能需要在noCaps列表中添加更多单词以获得更高的准确性。

Example

<强> JS

var ele = $('p'); 
ele.text(toProperCase(ele.text())); 

function toProperCase(str)
{
    var noCaps = ['of','a','the','and','an','am','or','nor','but','is','if','then', 
'else','when','at','from','by','on','off','for','in','out','to','into','with'];
    return str.replace(/\w\S*/g, function(txt, offset){
        if(offset != 0 && noCaps.indexOf(txt.toLowerCase()) != -1){
            return txt.toLowerCase();    
        }
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
}

<强> HTML

<p>THE QUICK BROWN FOX IS ABOUT TO JUMP OVER THE FENCE</p>

答案 1 :(得分:0)

我刚刚修改了Harmen的代码以满足您的需求。把它放在你的JS文件中。

jQuery.fn.ucwords = function() {
   return this.each(function(){
      var val = $(this).text().toLowerCase(), newVal = '';
      val = val.split(' ');

      for(var c=0; c < val.length; c++) {
         if (c>0 && val[c]=="is" || c>0 && val[c]=="to" || c>0 && val[c]=="the"){
             newVal+=val[c]+' ';
         } else newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' ');

      }
      $(this).text(newVal);
  });
}

$(document).ready(function(e) {
    $('p.link').ucwords();
});

示例的HTML

<p class="link">THE QUICK BROWN FOX IS ABOUT TO JUMP OVER THE FENCE</p>

和JSFiddle为你http://jsfiddle.net/fqEvX/