$('body').on('dblclick', '.value', function(){
  $(this).attr('contenteditable', true);
  //*** this is where I need some help   
  //$(this).focus().select();
  var str = this.textContent;`enter code here`
  console.debug(str);
  console.debug(str.length);
  const match = str.match(/^.*\d/);
  console.debug(match);
  console.debug(match[0].length);
  const range = document.createRange();
  range.setStart(this.firstChild, 0);  // Start index
  range.setEnd(this.firstChild, match[0].length);   // End index
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  //How to only select the numbers, not include the "mm"?
  //or how to select (length - 2) characters?
});
$(document).mouseup(function(e){
  var element = $('body').find('.value[contenteditable="true"]');
  if (!element.is(e.target) && element.has(e.target).length === 0){
    $('.value').attr('contenteditable', false);
  }
});
$(document).keypress(function(e) {
  if($('.value[contenteditable="true"]')){
    if(e.which == 13){ //enter
      $('.value').attr('contenteditable', false);
    }
  }
});

.list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  .item{
    display: flex;
    .id{
      width: 20px;
      font-weight: 600;
    }
    &:has(.value[contenteditable="true"]){
      .id{
        color: red;
      }
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="list">
  <div class="item">
    <span class="id">1</span>
    <span class="value">100mm</span>
  </div>
  <div class="item">
    <span class="id">2</span>
    <span class="value">2,500mm</span>
  </div>
  <div class="item">
    <span class="id">3</span>
    <span class="value">340mm</span>
  </div>
</div>