Разделение числа на разряды js

269

28 ноября 2018, 02:50

есть функция которая выводит определенное значение от 5000 до 1000000 на сайте

Как сделать чтоб число выводилось разбитое на разряды, тоесть с пробелами 1 000 000

Сделал таким способом, не работает (((

function numberWithSpaces(x) { 
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "); 
} 
 
// Basic Slider  
jQuery(document).ready(function() { 
  $("#slider").slider({ 
    value: 1000, 
    min: 5000, 
    max: 1000000, 
    step: 1000, 
    slide: function(event, ui) { 
      $("#amount").val(ui.value); 
    } 
  }); 
  $("#amount").val($("#slider").numberWithSpaces(slider("value"))); 
}); 
 
 
 
//Advance Range Slider  
jQuery(document).ready(function() { 
 
  var getOutput = $("#state"); 
  var getSlider = $("#advance_slide"); 
 
  getSlider.slider({ 
    range: true, 
    min: 5000, 
    max: 1000000, 
    values: [300, 500], 
    step: 1000, 
    slide: function(event, ui) { 
      getOutput.html(ui.values[0] + ' - ' + ui.values[1]); 
      $("#minValue").val(ui.values[0]); 
      $("#maxValue").val(ui.values[1]); 
    } 
  }); 
  getOutput.html(getSlider.slider("values", 0) + ' - ' + getSlider.slider("values", 1)); 
  $("#minValue").val(getSlider.slider('values', 0)); 
  $("#maxValue").val(getSlider.slider('values', 1)); 
 
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<!------ Include the above in your HEAD tag ----------> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"> 
<script src="////cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
  <!-- Start slider --> 
  <h1 class="text-center"> </h1> 
  <label for="amount">Select Price:</label> 
  <input type="text" id="amount" class="form-control" readonly="" style="font-weight: bold;color: green;margin-bottom: 15px"> 
 
  <div id="slider"></div> 
  <!-- End slider --> 
  <br/><br/> 
  <hr/> 
 
</div>

Answer 1

Перевод

1. С помощью функций конвертации в строку.

var num = 1234567890; 
var result = num.toLocaleString(); 
console.log(result); 
 
num = 1234567890.56; 
result = num.toLocaleString(); 
console.log(result);

2. С помощью регулярных выражений.

Для целочисленных значений:

function numberWithSpaces(x) { 
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "); 
} 
console.log(numberWithSpaces(1)); 
console.log(numberWithSpaces(100)); 
console.log(numberWithSpaces(10000)); 
console.log(numberWithSpaces(1000000)); 
console.log(numberWithSpaces(100000000));

Для значений с плавающей точкой:

function numberWithSpaces(x) { 
  var parts = x.toString().split("."); 
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, " "); 
  return parts.join("."); 
} 
console.log(numberWithSpaces(1.05)); 
console.log(numberWithSpaces(100.05)); 
console.log(numberWithSpaces(10000.05)); 
console.log(numberWithSpaces(1000000.05)); 
console.log(numberWithSpaces(100000000.05));

Простые регулярные выражения. Можете узнать о них подробно здесь.

Если вы не знаете изначально с каким типом значений будете работать- используйте второй вариант.

Answer 2

Вам необходимо вставлять разреженные по-разрядно числа не в слайдер, а в отдельно созданный элемент!
До тех, пока вы будете вставлять непонятную для слайдера субстанцию в слайдер, он будет падать.
Вот этот слайдер юзай - http://ionden.com/a/plugins/ion.rangeSlider/, модифицировать на порядок проще плюс требуемая задача там есть в примерах.