JavaScript - 在contenteditable div中获取插入符号(光标)之前的CSS样式字母

Question

我对div内容满意:

<span style="font-weight: 700">S</span>
<span style="font-weight: 100">o</span>
<span style="color: red">m</span>
<span style="text-decoration: underline">e</span>
<span style="background-color: green">T</span>
<span style="text-decoration: line-through">e</span>
<span style="font-style: italic">x</span>
<span style="font-family: Arial">t</span>

而且我想获得插入符号(光标)之前的元素的样式.例如,如果我之间有插入Some,Text我想得到text-decoration: underline.我的代码在下面(工作,但我得到了最后一个元素(font-family: Arial)的样式).如何使用JavaScript或/和JQuery修复它？
感谢帮助.

$('button').click(function() {
  var style = $('#Box span').last().attr('style');
  $('#Result').text('Result: ' + style);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="Box" contenteditable="true">
  <span style="font-weight: 700">S</span><span style="font-weight: 100">o</span><span style="color: red">m</span><span style="text-decoration: underline">e</span><span style="background-color: green">T</span><span style="text-decoration: line-through">e</span><span style="font-style: italic">x</span><span style="font-family: Arial">t</span>
</div>

<button>Get result</button>
<p id="Result"></p>