Обычно переключение языков на сайте сделано обычными ссылками вида |ru|en|cn|, которое никак не отслеживает на какой странице пользователь решил поменять язык, и просто переходит на главную страницу сайта с другим языком.
Попробуем сделать интелектуальный переключатель языков, который бы отслеживал, где в данный момент находится пользователь, чтобы перенаправить его на ту же страницу, но на выбранном языке.
Разметка HTML-кода:
<ul>
<li><a onclick="return switch_language('ru', 'ru')" href="/ru/">ru</a></li>
<li><a onclick="return switch_language('ru', 'en')" href="/en/">en</a></li>
<li><a onclick="return switch_language('ru', 'cn')" href="/cn/">cn</a></li>
</ul>
Первый параметр в функции — текущий язык, у меня он определяется в РНР-коде и вставляется в шаблон. Как понятно из примера — это вариант, когда текущий язык — русский(ru).
JavaScript код:
/ Аналог РНР-функции str_replace
function str_replace( search, replace, subject ) {
if ( !( replace instanceof Array ) ) {
replace = new Array( replace );
if ( search instanceof Array ) {
while ( search.length > replace.length ) {
replace[ replace.length ] = replace[ 0 ];
}
}
}
if ( !( search instanceof Array ) ) search = new Array( search );
while ( search.length > replace.length ) {
replace[ replace.length ] = '';
}
if ( subject instanceof Array ) {
for ( k in subject ) {
subject[ k ] = str_replace( search, replace, subject[ k ] );
}
return subject;
}
for ( var k = 0; k - 1 ) {
subject = subject.replace( search[ k ], replace[ k ] );
i = subject.indexOf( search[ k ], i );
}
}
return subject;
}
// Аналог РНР-функции parse_url
function parse_url( str, component ) {
var o = {
strictMode: false,
key: [ "source", "protocol", "authority", "userInfo", "user", "password", "host", "port", "relative", "path", "directory", "file", "query", "anchor" ],
q: {
name: "queryKey",
parser: /(?:^|&)([^&=]<em>)=?([^&]</em > ) / g
},
parser: {
strict: /^(?:([^:/?#]+):)?(?://((?:(([^:@]<em>):?([^:@]</em > ) ) ? @ ) ? ( [ ^: /?#]<em>)(?::(d</em > ) ) ? ) ) ? ( ( ( ( ? : [ ^ ? #/]<em>/)</em > )( [ ^ ? # ] < em > ) )( ? : ? ( [ ^ # ] < /em>))?(?:#(.<em>))?)/,
loose: /^(?:(?![^:@]+:[^:@/]</em > @ )( [ ^: /?#.]+):)?(?:///?)?((?:(([^:@]<em>):?([^:@]</em > ) ) ? @ ) ? ( [ ^: /?#]<em>)(?::(d</em > ) ) ? )( ( ( /(?:<a href="?![^?#/]*.[^?#/.]+(?:[?#]|$)">^?#</a > ) < em > /?)?([^?#/]</em > ) )( ? : ? ( [ ^ # ] < em > ) ) ? ( ? : #( . < /em>))?)/ // Added one optional slash to post-protocol to catch file:/// (should restrict this)
}
};
var m = o.parser[ o.strictMode ? "strict" : "loose" ].exec( str ),
uri = {},
i = 14;
while ( i-- ) {
uri[ o.key[ i ] ] = m[ i ] || "";
}
switch ( component ) {
case 'PHP_URL_SCHEME':
return uri.protocol;
case 'PHP_URL_HOST':
return uri.host;
case 'PHP_URL_PORT':
return uri.port;
case 'PHP_URL_USER':
return uri.user;
case 'PHP_URL_PASS':
return uri.password;
case 'PHP_URL_PATH':
return uri.path;
case 'PHP_URL_QUERY':
return uri.query;
case 'PHP_URL_FRAGMENT':
return uri.anchor;
default:
var retArr = {};
if ( uri.protocol !== '' ) {
retArr.scheme = uri.protocol;
}
if ( uri.host !== '' ) {
retArr.host = uri.host;
}
if ( uri.port !== '' ) {
retArr.port = uri.port;
}
if ( uri.user !== '' ) {
retArr.user = uri.user;
}
if ( uri.password !== '' ) {
retArr.pass = uri.password;
}
if ( uri.path !== '' ) {
retArr.path = uri.path;
}
if ( uri.query !== '' ) {
retArr.query = uri.query;
}
if ( uri.anchor !== '' ) {
retArr.fragment = uri.anchor;
}
return retArr;
}
}
// Собственно, само переключение
function switch_language( from, to ) {
// Если языки совпадают - пропустить
if ( from == to ) return false;
// Получить УРЛ
var url = document.location.href;
// Распарсить
var purl = parse_url( url );
// Взять ток путь
var path = purl.path;
var nurl;
// Вариант для главной страницы
if ( path == '/' ) {
nurl = url + to + '/';
// Для внутренних страниц
} else {
nurl = str_replace( '/' + from + '/', '/' + to + '/', url );
//nurl = url.replace(/from/, to);
}
// Переход по новому адресу
document.location.href = nurl;
return false;
}
Пример работы вы можете посмотреть на сайте Шанхайской Организации Сотрудничества (ШОС)
Источник: https://www.kobzarev.com/programming/intelligent-switch-languages/