将某个术语的所有实例转换为小写?

时间:2014-04-30 00:53:20

标签: javascript jquery css

我有一个导航,其中包含通过text-transform:uppercase大写的所有项目。但是,有一个术语(ISAtv)我总是想要低级。这个术语在整个导航过程中会出现多次(子菜单等),所以我不知道是否有一种方法可以使用某些代码来同时更改所有这些项目。

例如,它看起来像这样:

ABOUT PAGE1 PAGE2 PAGE3 WATCH ISAtv CONTACT

我想将“ISATV”的所有实例转换为“ISAtv”。我怎么能这样做?

2 个答案:

答案 0 :(得分:1)

接受的答案仍然无法正确解决问题。这是我编写的一个快速而又脏的函数,您可以使用它查找字符串的所有实例并保留其大小写。

JS:

function retainCaseStrings(retainWord, caseInsensitive) {
    $('body *').contents().each(function() {
        if (this.nodeType === 3 && $.trim(this.data).length) {
            var trimmedWord = $.trim(this.data);
            var indexOfRetainedWord;
            if (caseInsensitive) {
               var lowerCaseRetainWord = retainWord.toLowerCase();
               indexOfRetainedWord = trimmedWord.toLowerCase().indexOf(lowerCaseRetainWord);
            } else {
               indexOfRetainedWord = trimmedWord.indexOf(retainWord);   
            }
            if (indexOfRetainedWord !== -1) {
                var $span = $(document.createElement('span')).addClass('retain-case').append(trimmedWord.slice(indexOfRetainedWord, retainWord.length));
                var requiredNodes = [
                    document.createTextNode(trimmedWord.slice(0, indexOfRetainedWord)),
                    $span[0],
                     document.createTextNode(trimmedWord.slice(indexOfRetainedWord + retainWord.length))

                ];
                var parentNode = this.parentNode;
                parentNode.replaceChild(requiredNodes[2], this);
                parentNode.insertBefore(requiredNodes[1], requiredNodes[2]);
                parentNode.insertBefore(requiredNodes[0], requiredNodes[1]);
            }
        }
    });
}

var retainWord = 'ISAtv';
retainCaseStrings(retainWord, true);

CSS:

.retain-case { text-transform: none; }

答案 1 :(得分:0)

您可以使用正确的文本替换ISATV文本,并将其封装在带有类的span中,以删除text-transform

http://jsfiddle.net/Q2wMH/

JS:

var strIsatv = /(ISATV)+/gi;
document.body.innerHTML = document.body.innerHTML.replace(strIsatv, '<span class="untransform">ISAtv</span>');

CSS:

.untransform { text-transform: none; }