Изменение вида численной строки

240
28 февраля 2017, 17:46

Всем привет!

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

Код:

$(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>

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

READ ALSO
Javascript. Зацикливание при клике по ссылке
javascript

Javascript. Зацикливание при клике по ссылке

Доброго дня всемУ меня есть сценарий JS для нажатия на ссылки, которые содержат некое слово

 374
Как переключать .active между блоками?
javascript

Как переключать .active между блоками?

https://jsfiddlenet/bpdcy5vh/

 254
Рандомное появление блоков при клике
javascript

Рандомное появление блоков при клике

Всем привет! Я только в начале изучения js))) Поэтому такой вопрос: Есть 5 скрытых блоков (display: none) и кнопка с прицепленным к ней событиемСуть...

 334
Не работает localStorage.setItem
javascript

Не работает localStorage.setItem

Привет всем! Не работает localStoragesetItem не могу понять в чем причина

 244