1

Всем привет!

У меня есть блок div и input. Когда пользователь вводит значение в input, то это значение переносится в div. Как мне сделать, что бы когда пользователь вводил, к примеру степень ( 2^3 ), то она в div'е отображалась вот так: ?

Код:

$(function() {
  $('#number').on('keyup', function() {
    $('#value').html($(this).val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <input type="text" id="number">
</p>
<p>Уравнение:</p>
<div id="value"></div>

4
  • $('#value').html(process($(this).val()));, где process - ваше преобразование
    – vp_arth
    27 фев 2017 в 9:25
  • @vp_arth, а что за process?
    – user238662
    27 фев 2017 в 9:28
  • Функция вида string => string, в которой вы парсите значение поля, и строите то, что хотите увидеть.
    – vp_arth
    27 фев 2017 в 9:29
  • @vp_arth, так я и не пойму как это запарсить и вывести то что хочу
    – user238662
    27 фев 2017 в 9:31

1 ответ 1

1

$('#value').html(process($(this).val()));, где process - ваше преобразование:

$(function() {
  $('#number').on('keyup', function() {
    $('#value').html(process($(this).val()));
  });
});

function process(str) {
  return str.replace(/\^(\d+)/g, '<sup>$1</sup>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <input type="text" id="number">
</p>
<p>Уравнение:</p>
<div id="value"></div>


В Javascript нет поддержки рекурсирных регулярных выражений, поэтому нужно либо писать парсер, либо извращаться.
Без вложенных скобок можно так:

$(function() {
  $('#number').on('keyup', function() {
    $('#value').html(process($(this).val()));
  });
  $('#value').html(process($('#number').val()));
});

function process(str) {
  var res;
  while (res !== str) {
    res = str;
    str = res.replace(
      /([^+\-*/\^()]+)\^([^+\-*/\^()]+|\([^\)]+\))/g, 
      '$1<sup>$2</sup>'
    );
  }
  return str;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <input type="text" id="number" value="a^(x^3+3^x)/x^2">
</p>
<p>Уравнение:</p>
<div id="value"></div>

3
  • А если я введу 2^(3^5), то не выведет
    – user238662
    27 фев 2017 в 9:33
  • Я не планирую писать за вас парсер выражений. Простите.
    – vp_arth
    27 фев 2017 в 9:34
  • Спасибо. Додумал. Никогда не дружил с регулярными выражениями :)
    – user238662
    27 фев 2017 в 9:51

Ваш ответ

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