これが、本番環境で使用しているalexのコードの拡張バージョンです。
(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);
ここではready()関数にのみjQueryを使用していることに注意してください。jQuery互換性ラッパーは、関数の名前空間を作成するための便利な方法でもあります。それ以外は、2つの関数はjQueryにまったく依存していないため、それらを引き出すことができます。
アレックスの元のバージョンと比較して、これはいくつかの問題を解決します：
トルコ語と他のラテン語のコンテンツを混合した場合、それがないと非トルコ語で不適切な変換が行われるため、繰り返し実行されるlang属性を追跡します。これに従ってhtml、ではなく基本要素を渡しbodyます。lang="en"不適切な大文字化を防ぐために、トルコ語以外のタグを付けることができます。
以前の方法では、テキストとチェックボックスが含まれるラベルなど、テキストと要素が混在するノードでは機能しなかっTEXT_NODESたため、変換が適用されるのはこの方法だけです。innerHTML
サーバー側のソリューションと比較していくつかの顕著な欠点がありますが、いくつかの大きな利点もあります。その主な利点は、サーバー側がどのスタイルがどのコンテンツに適用されているかを意識することなく、カバレッジが保証されることです。コンテンツのいずれかがインデックスに登録され、Googleの概要に表示されている場合（たとえば）、配信時に小文字のままにしておくとはるかに優れています。