Изменение текста на странице HTML с помощью JavaScript

210

26 сентября 2019, 03:50

У меня есть такой скрипт:

		function latin() { 
			document.body.innerHTML = document.body.innerHTML.replace(/А/g, 'A').replace(/а/g, 'a').replace(/Ә/g, 'Á').replace(/ә/g, 'á').replace(/Б/g, 'B').replace(/б/g, 'b'); 
		} 
 
		function cyrilic() { 
			document.body.innerHTML = document.body.innerHTML.replace(/А/g, 'A').replace(/а/g, 'a').replace(/Á/g, 'Ә').replace(/á/g, 'ә').replace(/B/g, 'Б').replace(/b/g, 'б'); 
		}

<p>А а Ә ә Б б</p>	 
<button onclick='latin()'>Латинский</button> 
<button onclick='cyrilic()'>Кириллица</button>

Что делать, если при нажатии на "Латинский" всё изменяется нормально, а при нажатии на "Кириллица" выходит код кнопки, при этом если я пишу код для изменения всех букв по алфавиту, у меня ещё и выходит код функции

Answer 1

Ваш код делает больше, чем вы, вероятно думаете. Он меняет весь html документа, на тот же html, меняя в нём буквы. При замене b а б, ваш тег button превращается в бutton и браузер просто не понимает его.

Я думаю вам надо менять не весь документ вместе с кнопками, а только область с текстом.

Получите элемент с текстом var p = document.querySelector('p');
Используйте его свойство innerHTML p.innerHTML = ...

Answer 2

Предлагаю сделать примерно так:

UPD: исправил с учетом изменения содержимого всех элементов на странице.

var transformConfig = { 
  latin: [ 
    ['А', 'A'], 
    ['a', 'a'], 
    ['Ә', 'Á'], 
    ['ә', 'á'], 
    ['Б', 'B'], 
    ['б', 'b'], 
  ], 
  cyrillic: [ 
    ['А', 'A'], 
    ['а', 'a'], 
    ['Á', 'Ә'], 
    ['á', 'ә'], 
    ['B', 'Б'], 
    ['b', 'б'], 
  ] 
}; 
 
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] 
          ) 
        }); 
      } 
    } 
  } 
}

<p>А а Ә ә Б б</p> 
<div>А а Ә ә Б б</div> 
<a href="#" onclick="return false;">А а Ә ә Б б</a> 
<br> 
<button onclick="transform('latin')">Латинский</button> 
<button onclick="transform('cyrillic')">Кириллица</button>