Javascript 如何获得突出显示的单词并将其包装在具有数据属性的新元素中？

HTML:

JS:

我在p标签中有一块文本，我希望它是这样的：

用户在块内选择一些单词 用户在提示框中输入一些内容 将突出显示的单词放在带有数据属性的span标记中，我称之为data id，该数据属性值来自上面的提示步骤2 我如何做到这一点

请帮助我。

在评论中给出的小提琴帮助下，您可以实现以下目标：

函数selectHTML{ 试一试{ 如果window.ActiveXObject{ var c=document.selection.createRange； 返回c.htmlText； } var nNd=document.createElementspan； var w=getSelection.getRangeAt0； w、 周围环境； 返回nNd.innerHTML； }抓住e{ 如果window.ActiveXObject{ 返回document.selection.createRange； }否则{ 返回选择； } } } $function{ $'p'。单击函数{ var selected=selectHTML； var user_input=window.prompt； $'span'.addClass'highlight'.attr'data-id'，用户输入； }; }; .亮点{ 颜色：红色； } Lorem ipsum dolor sit amet，是一位杰出的献身者。莫里斯坐在埃米特和坦普尔之间，发酵着的酒和酒。临时拍卖人。mollis mauris Vivamus id sem aliquam，vel Fentum neque fringilla。莫比·马莱苏达·阿库姆桑 奥古斯特·亨德雷特。埃尼安·康莫多·瓦普塔特·拉西尼亚。在连续扫描电镜下观察到一个整数。毛里斯·奎斯（Mauris quis）是一只暂时的蜥蜴。用euismod nisl lacinia的话来说，Donec scelerisque velit ac metus aliquet。奎斯克饮食 孕妇便利症。在hac habitasse Plateum，一句名言。康格，自由消费者，文雅的智者。潜力悬钩子。在mollis purus进行Present。

扩展您的用例

函数selectHTML{ 试一试{ 如果window.ActiveXObject{ var c=document.selection.createRange； 返回c.htmlText； } var nNd=document.createElementspan； var w=getSelection.getRangeAt0； w、 周围环境； 返回nNd.innerHTML； }抓住e{ 如果window.ActiveXObject{ 返回document.selection.createRange； }否则{ 返回选择； } } } $function{ $'changeColor'。单击函数{ var val=提示给我值； var mytext=selectHTML； $'span'.addClass'highlight'.attr'data-id'，val； }; }; .亮点{ 颜色：红色； } Lorem ipsum dolor sit amet，是一位杰出的献身者。莫里斯坐在埃米特和坦普尔之间，发酵着的酒和酒。临时拍卖人。mollis mauris Vivamus id sem aliquam，vel Fentum neque fringilla。Morbi malesuada accumsan augue ut hendrerit。埃尼安·康莫多·瓦普塔特·拉西尼亚。在连续扫描电镜下观察到一个整数。毛里斯·奎斯（Mauris quis）是一只暂时的蜥蜴。用euismod nisl lacinia的话来说，Donec scelerisque velit ac metus aliquet。妊娠期设施不全。在hac habitasse Plateum，一句名言。康格，自由消费者，文雅的智者。潜力悬钩子。莫利斯·普卢斯广场

---

选中此复选框您想编辑同一段落并在span内添加所选文本，然后将其放回同一段落或不同的选择？@GuruprasadRao我想编辑同一段落并在span内添加所选文本，然后将其放回同一段落。谢谢@anu&@Guruprasad Rao。你能在不使用try-and-catch的情况下更新脚本吗？我对“捉迷藏”不太熟悉。谢谢，注意到了。谢谢@GuruprasadRao的信息。你以16秒的优势击败了我：毕竟这是你的解决方案Bdw你的方法有点不同。。无论如何。。好的@anu+1：我从别人的帖子中得到了帮助，我在我的答案中链接了这个帖子。祝你有个愉快的一天：你也是，伙计快乐编码..：

<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>

.highlight {
  color: red;
}

$(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>
  });

});