Ошибка с заменой букв на странице

108
27 сентября 2019, 15:30

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

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

Answer 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>

READ ALSO
html и css тег &lt;button&gt; его id

html и css тег <button> его id

У меня проблема я привязываю тегу button id а потом пишу это id в css и у меня этот айди просто не видит я пишу:

126
Получить значение тега P

Получить значение тега P

Всем привет, есть такая верстка

138
Получить приложение, использующее файл

Получить приложение, использующее файл

У меня есть путь до картинки, и она используется программой для просмотра картинок, следовательно картинку нельзя удалить, пока не завершен...

118
Обновить счетчик на кнопке telegram bot C#

Обновить счетчик на кнопке telegram bot C#

Подскажите пожалуйста, как обновить счетчик на кнопке в сообщениях от бота Telegram? Хочу чтобы при нажатии на кнопку + счетчик на этой кнопке...

132