Voici ma version améliorée de alex de code que j'utilise dans la production:
(function($) {
function getStyle(element, style) {
var result;
if (document.defaultView && document.defaultView.getComputedStyle) {
result = document.defaultView.getComputedStyle(element, '').getPropertyValue(style);
} else if(element.currentStyle) {
style = style.replace(/\-(\w)/g, function (strMatch, p1) {
return p1.toUpperCase();
});
result = element.currentStyle[style];
}
return result;
}
function replaceRecursive(element, lang) {
if(element.lang) {
lang = element.lang; // Maintain language context
}
if (element && element.style && getStyle(element, 'text-transform') == 'uppercase') {
if (lang == 'tr' && element.value) {
element.value = element.value.replace(/ı/g, 'I');
element.value = element.value.replace(/i/g, 'İ');
}
for (var i = 0; i < element.childNodes.length; ++i) {
if (lang == 'tr' && element.childNodes[i].nodeType == Node.TEXT_NODE) {
element.childNodes[i].textContent = element.childNodes[i].textContent.replace(/ı/g, 'I');
element.childNodes[i].textContent = element.childNodes[i].textContent.replace(/i/g, 'İ');
} else {
replaceRecursive(element.childNodes[i], lang);
}
}
} else {
if (!element.childNodes || element.childNodes.length == 0) return;
for (var i = 0; i < element.childNodes.length; ++i) {
replaceRecursive(element.childNodes[i], lang);
}
}
}
$(document).ready(function(){ replaceRecursive(document.getElementsByTagName('html')[0], ''); })
})(jQuery);
Notez que je suis en utilisant jQuery ici uniquement pour l' ready()
fonction. Le jQuery compatibilité wrapper est aussi un moyen pratique pour l'espace de noms les fonctions. Autre que cela, les deux fonctions ne comptez pas sur jQuery à tous, de sorte que vous pourrait les sortir.
Par rapport à alex de la version originale de celui-ci résout quelques problèmes:
Il garde la trace de l'attribut lang car elle se répète, parce que si vous avez mélangé le turc et l'autre latine contenu, vous obtiendrez une mauvaise transforme sur la non-turque sans elle. Conformément à ce que je passe dans la base html
élément, de ne pas l' body
. Vous pouvez coller lang="en"
sur toutes les balises qui n'est pas le turc pour éviter une mauvaise utilisation des majuscules.
Il s'applique à la transformation d' TEXT_NODES
car la précédente innerHTML
méthode ne fonctionne pas avec un mélange de texte/nœuds d'éléments tels que des étiquettes avec le texte et les cases à l'intérieur d'eux.
Tout en ayant quelques exemples de lacunes par rapport à une solution côté serveur, il a aussi quelques grands avantages, dont le principal est la garantie de la couverture sans le côté serveur avoir à être conscients de ce que les styles sont appliqués à ce contenu. Si le contenu est indexé et affichées dans Google résumés (par exemple), il est beaucoup mieux si elle reste en minuscules quand ils sont servis.