1

У меня такой код:

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, &lt, &gt и др., всё это появляется! Можете подсказать, что мне делать чтобы это исправить?

4
  • добавь пример воспроизводящий ошибку.
    – Grundy
    10 фев 2019 в 6:21
  • Сделал, теперь можете посмотреть на результат при нажатии на - Кириллица 10 фев 2019 в 6:38
  • @НаильЯрулин у Вас заменяются теги тоже, а не только содержимое
    – Vein
    10 фев 2019 в 6:57
  • а можно ли это как-то исправить? чтобы только изменялся текст, а теги не изменялись 10 фев 2019 в 7:05

1 ответ 1

1

Проблема заключается в том, что 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>

17
  • Спасибо вам огромное, вы мне очень помогли!!! 10 фев 2019 в 7:37
  • @НаильЯрулин, обрати внимание, что у тебя не совсем корректный алгоритм замены, буква ц при переводе в латиницу и обратно трансформируется в ts и тс соответственно
    – Grundy
    10 фев 2019 в 7:43
  • А разве не правильно? 10 фев 2019 в 7:58
  • @НаильЯрулин, нет, у тебя слово "кириллица" превращается в "кириллитса"
    – Grundy
    10 фев 2019 в 8:01
  • А да, блин, но я же превращаю ts в ц 10 фев 2019 в 8:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.