У меня такой код:
var transformConfig = {
latin: [
['А', 'A'],
['а', 'a'],
['Ә', 'Á'],
['ә', 'á'],
['Б', 'B'],
['б', 'b'],
['В', 'V'],
['в', 'v'],
['Г', 'G'],
['г', 'g'],
['Ғ', 'Ǵ'],
['ғ', 'ǵ'],
['Д', 'D'],
['д', 'd'],
['Е', 'E'],
['е', 'e'],
['Ж', 'J'],
['ж', 'j'],
['З', 'Z'],
['з', 'z'],
['И', 'I'],
['и', 'ı'],
['Й', 'I'],
['й', 'ı'],
['К', 'K'],
['к', 'k'],
['Қ', 'Q'],
['қ', 'q'],
['Л', 'L'],
['л', 'l'],
['М', 'M'],
['м', 'm'],
['Н', 'N'],
['н', 'n'],
['Ң', 'Ń'],
['ң', 'ń'],
['О', 'O'],
['о', 'o'],
['Ө', 'Ó'],
['ө', 'ó'],
['П', 'P'],
['п', 'p'],
['Р', 'R'],
['р', 'r'],
['С', 'S'],
['с', 's'],
['Т', 'T'],
['т', 't'],
['У', 'Ý'],
['у', 'ý'],
['Ұ', 'U'],
['ұ', 'u'],
['Ү', 'Ú'],
['ү', 'ú'],
['Ф', 'F'],
['ф', 'f'],
['Х', 'H'],
['х', 'h'],
['Һ', 'Һ'],
['һ', 'h'],
['Ц', 'Ts'],
['ц', 'ts'],
['Ч', 'Ch'],
['ч', 'ch'],
['Ш', 'Sh'],
['ш', 'sh'],
['Ы', 'Y'],
['ы', 'y'],
['І', 'I'],
['і', 'i'],
['Э', 'E'],
['э', 'e'],
['Ю', 'Iý'],
['ю', 'iý'],
['Я', 'Ia'],
['я', 'ia'],
['Щ', ''],
['Ь', ''],
['Ъ', ''],
['щ', ''],
['ь', ''],
['ъ', ''],
['ё', ''],
['Ё', ''],
],
cyrillic: [
['А', 'A'],
['а', 'a'],
['Á', 'Ә'],
['á', 'ә'],
['B', 'Б'],
['b', 'б'],
['V', 'В'],
['v', 'в'],
['G', 'Г'],
['g', 'г'],
['Ǵ', 'Ғ'],
['ǵ', 'ғ'],
['D', 'Д'],
['d', 'д'],
['Е', 'E'],
['е', 'e'],
['J', 'Ж'],
['j', 'ж'],
['Z', 'З'],
['z', 'з'],
['I', 'И'],
['ı', 'и'],
['I', 'Й'],
['ı', 'й'],
['К', 'K'],
['k', 'к'],
['Q', 'Қ'],
['q', 'қ'],
['L', 'Л'],
['l', 'л'],
['М', 'M'],
['m', 'м'],
['N', 'Н'],
['n', 'н'],
['Ń', 'Ң'],
['ń', 'ң'],
['О', 'O'],
['о', 'o'],
['Ó', 'Ө'],
['ó', 'ө'],
['P', 'П'],
['p', 'п'],
['R', 'Р'],
['r', 'р'],
['S', 'С'],
['s', 'с'],
['Т', 'T'],
['t', 'т'],
['Ý', 'У'],
['ý', 'у'],
['U', 'Ұ'],
['u', 'ұ'],
['Ú', 'Ү'],
['ú', 'ү'],
['F', 'Ф'],
['f', 'ф'],
['H', 'Х'],
['h', 'х'],
['Һ', 'Һ'],
['h', 'һ'],
['Ts', 'Ц'],
['ts', 'ц'],
['Ch', 'Ч'],
['ch', 'ч'],
['Sh', 'Ш'],
['sh', 'ш'],
['Y', 'Ы'],
['y', 'ы'],
['І', 'I'],
['і', 'i'],
['E', 'Е'],
['e', 'е'],
['Iý', 'Ю'],
['iý', 'ю'],
['Ia', 'Я'],
['ia', 'я'],
['Э', ''],
['э', ''],
]
};
function transform(type) {
// выполняем дальше если есть такое свойство
if (typeof transformConfig[type] !== 'undefined') {
// находим все элементы на странице
var collection = document.body.getElementsByTagName('*');
// перебираем все элементы на странице
for (var idx = 0; idx < collection.length; idx++) {
element = collection[idx];
// если у элемента есть свойство innerHTML, идем дальше
if (typeof element.innerHTML !== 'undefined') {
transformConfig[type].forEach(function(chars) {
var pattern = new RegExp(
chars[0],
'g'
);
// изменяем innerHTML
element.innerHTML = element.innerHTML.replace(
pattern,
chars[1]
)
});
}
}
}
}
html {
margin: 0px;
padding: 0px;
}
.hidden-menu {
display: block;
position: fixed;
list-style:none;
padding-top: 20vh;
padding-left: 0vh;
text-align: center;
margin: 0;
box-sizing: border-box;
width: 200px;
background-color: #B0E0E6;
height: 100%;
top: 0;
left: -200px;
transition: left .2s;
z-index: 2;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.hidden-menu-ticker {
display: none;
}
.btn-menu {
color: #fff;
background-color: #7B68EE;
padding: 5px;
position: fixed;
top: 5px;
left: 5px;
cursor: pointer;
transition: left .23s;
z-index: 3;
width: 25px;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.btn-menu span {
display: block;
height: 5px;
background-color: #fff;
margin: 5px 0 0;
transition: all .1s linear .23s;
position: relative;
}
.btn-menu span.first {
margin-top: 0;
}
.hidden-menu-ticker:checked ~ .btn-menu {
left: 160px;
}
.hidden-menu-ticker:checked ~ .hidden-menu {
left: 0;
}
.hidden-menu-ticker:checked ~ .btn-menu span.first {
-webkit-transform: rotate(45deg);
top: 10px;
}
.hidden-menu-ticker:checked ~ .btn-menu span.second {
opacity: 0;
}
.hidden-menu-ticker:checked ~ .btn-menu span.third {
-webkit-transform: rotate(-45deg);
top: -10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<title>test</title>
</head>
<body class="wrapper-seven-eight">
<div id="particles-js"></div>
<h1 class="wrapper-logo">test</h1>
<button onclick="transform('latin')" style="position: absolute; top: 200px; left: 200px">Латинский</button>
<button onclick="transform('cyrillic')" style="position: absolute; top: 200px; left: 400px">Кириллица</button>
<h2 class="wrapper-welcome">test</h2>
<!--Боковое меню-->
<input type="checkbox" id="hmt" class="hidden-menu-ticker">
<label class="btn-menu" for="hmt">
<span class="first"></span>
<span class="second"></span>
<span class="third"></span>
</label>
<ul class="hidden-menu">
<Br><Br><li><a href="#">test</a></li><Br><Br>
<li><a href="#">test</a></li><Br><Br>
<li><a href="#">test</a></li>
</ul>
<!--Скрипты-->
<script src="app.js"></script>
</body>
</html>
Когда я пеняю данные 3 буквы, то заменяется нормально, но когда и заменяю весь алфавит, то у меня появляется код страницы HTML: class, span, <, > и др., всё это появляется! Можете подсказать, что мне делать чтобы это исправить?
Проблема заключается в том, что innerHTML
содержит текст вместе с тегами и для label
в такой разметке
<label class="btn-menu" for="hmt">
<span class="first"></span>
<span class="second"></span>
<span class="third"></span>
</label>
он будет равен
<span class="first"></span>
<span class="second"></span>
<span class="third"></span>
При замене меняется также имя тега, что нарушает спецификацию.
Для решения, нужно менять только текст и только в текстовых элементах.
Так как html является деревом, можно обойти его в глубину и если полученный узел дерева текстовый - произвести замену.
Например:
var transformConfig = {
latin: [
['А', 'A'],
['а', 'a'],
['Ә', 'Á'],
['ә', 'á'],
['Б', 'B'],
['б', 'b'],
['В', 'V'],
['в', 'v'],
['Г', 'G'],
['г', 'g'],
['Ғ', 'Ǵ'],
['ғ', 'ǵ'],
['Д', 'D'],
['д', 'd'],
['Е', 'E'],
['е', 'e'],
['Ж', 'J'],
['ж', 'j'],
['З', 'Z'],
['з', 'z'],
['И', 'I'],
['и', 'ı'],
['Й', 'I'],
['й', 'ı'],
['К', 'K'],
['к', 'k'],
['Қ', 'Q'],
['қ', 'q'],
['Л', 'L'],
['л', 'l'],
['М', 'M'],
['м', 'm'],
['Н', 'N'],
['н', 'n'],
['Ң', 'Ń'],
['ң', 'ń'],
['О', 'O'],
['о', 'o'],
['Ө', 'Ó'],
['ө', 'ó'],
['П', 'P'],
['п', 'p'],
['Р', 'R'],
['р', 'r'],
['С', 'S'],
['с', 's'],
['Т', 'T'],
['т', 't'],
['У', 'Ý'],
['у', 'ý'],
['Ұ', 'U'],
['ұ', 'u'],
['Ү', 'Ú'],
['ү', 'ú'],
['Ф', 'F'],
['ф', 'f'],
['Х', 'H'],
['х', 'h'],
['Һ', 'Һ'],
['һ', 'h'],
['Ц', 'Ts'],
['ц', 'ts'],
['Ч', 'Ch'],
['ч', 'ch'],
['Ш', 'Sh'],
['ш', 'sh'],
['Ы', 'Y'],
['ы', 'y'],
['І', 'I'],
['і', 'i'],
['Э', 'E'],
['э', 'e'],
['Ю', 'Iý'],
['ю', 'iý'],
['Я', 'Ia'],
['я', 'ia'],
['Щ', ''],
['Ь', ''],
['Ъ', ''],
['щ', ''],
['ь', ''],
['ъ', ''],
['ё', ''],
['Ё', ''],
],
cyrillic: [
['А', 'A'],
['а', 'a'],
['Á', 'Ә'],
['á', 'ә'],
['B', 'Б'],
['b', 'б'],
['V', 'В'],
['v', 'в'],
['G', 'Г'],
['g', 'г'],
['Ǵ', 'Ғ'],
['ǵ', 'ғ'],
['D', 'Д'],
['d', 'д'],
['Е', 'E'],
['е', 'e'],
['J', 'Ж'],
['j', 'ж'],
['Z', 'З'],
['z', 'з'],
['I', 'И'],
['ı', 'и'],
['I', 'Й'],
['ı', 'й'],
['К', 'K'],
['k', 'к'],
['Q', 'Қ'],
['q', 'қ'],
['L', 'Л'],
['l', 'л'],
['М', 'M'],
['m', 'м'],
['N', 'Н'],
['n', 'н'],
['Ń', 'Ң'],
['ń', 'ң'],
['О', 'O'],
['о', 'o'],
['Ó', 'Ө'],
['ó', 'ө'],
['P', 'П'],
['p', 'п'],
['R', 'Р'],
['r', 'р'],
['S', 'С'],
['s', 'с'],
['Т', 'T'],
['t', 'т'],
['Ý', 'У'],
['ý', 'у'],
['U', 'Ұ'],
['u', 'ұ'],
['Ú', 'Ү'],
['ú', 'ү'],
['F', 'Ф'],
['f', 'ф'],
['H', 'Х'],
['h', 'х'],
['Һ', 'Һ'],
['h', 'һ'],
['Ts', 'Ц'],
['ts', 'ц'],
['Ch', 'Ч'],
['ch', 'ч'],
['Sh', 'Ш'],
['sh', 'ш'],
['Y', 'Ы'],
['y', 'ы'],
['І', 'I'],
['і', 'i'],
['E', 'Е'],
['e', 'е'],
['Iý', 'Ю'],
['iý', 'ю'],
['Ia', 'Я'],
['ia', 'я'],
['Э', ''],
['э', ''],
]
};
function transform(type) {
// выполняем дальше если есть такое свойство
if (typeof transformConfig[type] !== 'undefined') {
// находим все элементы на странице
var collection = Array.from(document.body.childNodes);
// перебираем все элементы на странице
while (collection.length) {
var node = collection.shift();
if (node.nodeType != Node.TEXT_NODE && node.childNodes.length) {
collection.unshift(...node.childNodes);
continue;
}
transformConfig[type].forEach(function(chars) {
var pattern = new RegExp(
chars[0],
'g'
);
// изменяем innerHTML
node.textContent = node.textContent.replace(
pattern,
chars[1]
)
});
}
}
}
html {
margin: 0px;
padding: 0px;
}
.hidden-menu {
display: block;
position: fixed;
list-style: none;
padding-top: 20vh;
padding-left: 0vh;
text-align: center;
margin: 0;
box-sizing: border-box;
width: 200px;
background-color: #B0E0E6;
height: 100%;
top: 0;
left: -200px;
transition: left .2s;
z-index: 2;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.hidden-menu-ticker {
display: none;
}
.btn-menu {
color: #fff;
background-color: #7B68EE;
padding: 5px;
position: fixed;
top: 5px;
left: 5px;
cursor: pointer;
transition: left .23s;
z-index: 3;
width: 25px;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
.btn-menu span {
display: block;
height: 5px;
background-color: #fff;
margin: 5px 0 0;
transition: all .1s linear .23s;
position: relative;
}
.btn-menu span.first {
margin-top: 0;
}
.hidden-menu-ticker:checked~.btn-menu {
left: 160px;
}
.hidden-menu-ticker:checked~.hidden-menu {
left: 0;
}
.hidden-menu-ticker:checked~.btn-menu span.first {
-webkit-transform: rotate(45deg);
top: 10px;
}
.hidden-menu-ticker:checked~.btn-menu span.second {
opacity: 0;
}
.hidden-menu-ticker:checked~.btn-menu span.third {
-webkit-transform: rotate(-45deg);
top: -10px;
}
<div id="particles-js"></div>
<h1 class="wrapper-logo">test</h1>
<button onclick="transform('latin')" style="position: absolute; top: 200px; left: 200px">Латинский</button>
<button onclick="transform('cyrillic')" style="position: absolute; top: 200px; left: 400px">Кириллица</button>
<h2 class="wrapper-welcome">test</h2>
<!--Боковое меню-->
<input type="checkbox" id="hmt" class="hidden-menu-ticker">
<label class="btn-menu" for="hmt">
<span class="first"></span>
<span class="second"></span>
<span class="third"></span>
</label>
<ul class="hidden-menu">
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
Виртуальный выделенный сервер (VDS) становится отличным выбором
У меня проблема я привязываю тегу button id а потом пишу это id в css и у меня этот айди просто не видит я пишу:
У меня есть путь до картинки, и она используется программой для просмотра картинок, следовательно картинку нельзя удалить, пока не завершен...
Подскажите пожалуйста, как обновить счетчик на кнопке в сообщениях от бота Telegram? Хочу чтобы при нажатии на кнопку + счетчик на этой кнопке...