0

Вот код

		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 (исходный код)?

11
  • а почему он не должен выводить HHH? и что должна была делать данная строка: output.innerHTML += sourcecode.value.replace(exp.q, sourcecode.value+"<br>")?
    – Grundy
    12 июл 2017 в 16:13
  • А почему должен?
    – user245150
    12 июл 2017 в 16:13
  • Потому что ты сам ее добавляешь в результат
    – Grundy
    12 июл 2017 в 16:14
  • 1
    не угадал, попробуй еще раз :)
    – Grundy
    12 июл 2017 в 16:15
  • 1
    внезапно, да? если ничего не менять, все остается так же :)
    – Grundy
    12 июл 2017 в 16:16

1 ответ 1

0

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

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>

Ваш ответ

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