Convert all instances of a certain term to lowercase?

Question

I have a navigation with all of the items capitalized via text-transform:uppercase. However, there is one term (ISAtv) that I always want lower-cased. This term comes up multiple times throughout the navigation (submenus, etc.) so instead of just targeting that one item through CSS, I was wondering if there was a way I can use some code to change all of them at once.

So for example, it would look something like this:

ABOUT PAGE1 PAGE2 PAGE3 WATCH ISAtv CONTACT

I would like to convert all instances of "ISATV" to "ISAtv". How can I do this?

Using javascript to make the text lowercase doesn't help much when the text-transform style is set to uppercase. — adeneo, Apr 30 '14 at 00:55

sahbeewah · Accepted Answer · 2014-04-30T03:07:50.113

The accepted answer still does not solve the issue correctly. Here's a quick and dirty function I wrote that you can use which finds all instances of a string and retains its case.

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; }

what if there are 'ISAtv' written as 'isatv' or 'IsAtV' or something like that in the page? — reuelab, Apr 30 '14 at 02:39
@Froient I've modified the above to support case insensitive matches. You can pass in true as the second argument to use this. — sahbeewah, Apr 30 '14 at 03:08

score 0 · Answer 2 · answered Apr 30 '14 at 01:00

0

You can replace the ISATV text with correct text as well as encapsulate it in a span with a class to remove the 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; }

answered Apr 30 '14 at 01:00

Ming

4,468
1
21
21

Consider the possibility that there may be html attributes whose names or values may contain the string "isatv". – sahbeewah Apr 30 '14 at 01:05

Convert all instances of a certain term to lowercase?

2 Answers2