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

307

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

458

javascript

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

https://jsfiddlenet/bpdcy5vh/

331

javascript

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

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

405

javascript

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

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

317