Почему выводит исходный код снизу

307

14 июля 2017, 06:40

Вот код

		var sourcecode = document.getElementById('source'); 
		var output = document.getElementById('output'); 
		var compile = document.getElementById('compile'); 
		var exp = { 
			h: new RegExp('H', 'gi'), 
			q: new RegExp('Q', 'gi') 
		} 
		compile.onclick = function() { 
			output.innerHTML = '>'; 
 
 
			output.innerHTML += sourcecode.value.replace(exp.h, 'Hello world!<br>') 
			output.innerHTML += sourcecode.value.replace(exp.q, sourcecode.value+"<br>") 
		}

#output { 
	padding: 5px; 
	width: 50%; 
	min-height: 200px; 
	background: #000; 
	font-family: monospace; 
	color: #fff; 
}

	<textarea name="text" id="source" cols="30" rows="10"> 
HHH 
	</textarea> 
	<br> 
	<button id="compile">Запустить</button> 
	<div id="output"> 
		&gt; 
	</div>

Вопрос, почему он выводит HHH (исходный код)?

Answer 1

Ошибка в том, что замены происходят только с исходной строкой. И когда ничего не поменялось после выполнения

sourcecode.value.replace(exp.q, sourcecode.value+"<br>")

Результат добавляется в output. Вот и получается постоянный вывод исходного кода в конце.

Вместо этого, следующую замену нужно применять к результату предыдущей

var result = sourcecode.value.replace(exp.h, 'Hello world!<br>');
result = result.replace(exp.q, sourcecode.value + "<br>");

или

var result = sourcecode.value
                       .replace(exp.h, 'Hello world!<br>');
                       .replace(exp.q, sourcecode.value + "<br>");

И только полученный результат добавлять в output.

Например:

var sourcecode = document.getElementById('source'); 
var output = document.getElementById('output'); 
var compile = document.getElementById('compile'); 
var exp = { 
  h: /H/gi, 
  q: /Q/gi 
} 
compile.onclick = function() { 
  output.innerHTML = '>'; 
  var result = sourcecode.value.replace(exp.h, 'Hello world!<br>'); 
  result = result.replace(exp.q, sourcecode.value + "<br>"); 
  output.innerHTML += result; 
}

#output { 
  padding: 5px; 
  width: 50%; 
  min-height: 200px; 
  background: #000; 
  font-family: monospace; 
  color: #fff; 
}

<textarea name="text" id="source" cols="30" rows="10"> 
HHH 
	</textarea> 
<br> 
<button id="compile">Запустить</button> 
<div id="output"> 
  &gt; 
</div>