Как сделать в span маску?

const $input = $('#num'); 
const $result = $('#result'); 
 
const formatByMask = (mask, value) => { 
  let formattedValue = mask; 
  const maskCharCount = [...mask].reduce((result, chr) => { 
    if(chr === 'X') result++; 
    return result 
  }, 0); 
   
  for(let i = 0; i < maskCharCount; i++) { 
    if(value[i]) formattedValue = formattedValue.replace('X', value[i]); 
  } 
   
  return formattedValue; 
} 
 
$input.on('input', e => { 
  const {target} = e; 
  const {value} = target; 
  const mask = $result.attr('data-mask'); 
   
  $result.text(formatByMask(mask, value)); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input id='num'> 
<div id='result' data-mask='X-XX-XX-X'></div>