javascript - 強調表示された単語を取得し、データ属性で新しい要素にラップする方法は?

Question

JSFIDDLE

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet est tempus, fermentum ligula et, hendrerit nisl. Praesent tempor eget quam quis auctor. Vivamus mollis mauris id sem aliquam, vel fermentum neque fringilla. Morbi malesuada accumsan augue ut hendrerit. Aenean commodo vulputate lacinia. Integer at purus eget arcu venenatis consectetur vel sed sem. Mauris quis est id ligula aliquam tempor a nec neque. Donec scelerisque velit ac metus aliquet, in euismod nisl lacinia. Quisque imperdiet gravida facilisis. In hac habitasse platea dictumst. Quisque vel erat congue, consequat libero eget, blandit sapien. Suspendisse potenti. Praesent at mollis purus.</p>

CSS:

.highlight {
  color: red;
}

JS:

$(function(){

  $('p').click(function(){
    // get highlighted words

    // get user input
    var user_input = window.prompt();

    // put highlighted words in <span class="highlight"></span> element
    // and add data-id to the span element
    // expected output:
    // <p>... <span class="highlight" data-id="user input here">highlighted words here</span> ...</p>
  });

});

タグにテキストのブロックがあり、次のpようにしたい：

1. ユーザーがブロック内のいくつかの単語を選択します
2. ユーザーがプロンプト ボックス内に何かを入力します
3. 強調表示された単語spanを data-attribute でタグ内に配置し (私はそれを と呼びましたdata-id)、この data-attribute 値はプロンプトから取得されます (上記のステップ 2)。

どうすればこれを達成できますか?

私を助けてください。