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

Question

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 标签中有一段文字，我希望它是这样的：

用户 select 块内的一些词
用户在提示框中输入内容
将突出显示的单词放入带有数据属性的 span 标签中（我将其命名为 data-id），此数据属性值来自提示（上面的第 2 步） )

如何实现？

请帮助我。

Answer 1

在评论中给出的fiddle的帮助下，您可以实现如下：

function selectHTML() {
  try {
    if (window.ActiveXObject) {
      var c = document.selection.createRange();
      return c.htmlText;
    }

    var nNd = document.createElement("span");
    var w = getSelection().getRangeAt(0);
    w.surroundContents(nNd);
    return nNd.innerHTML;
  } catch (e) {
    if (window.ActiveXObject) {
      return document.selection.createRange();
    } else {
      return getSelection();
    }
  }
}

$(function() {
  $('p').click(function() {
    var selected = selectHTML();
    var user_input = window.prompt();
    $('span').addClass('highlight').attr('data-id', user_input);
  });
});

.highlight {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

为您的用例扩展this post

function selectHTML() {
    try {
        if (window.ActiveXObject) {
            var c = document.selection.createRange();
            return c.htmlText;
        }
    
        var nNd = document.createElement("span");
        var w = getSelection().getRangeAt(0);
        w.surroundContents(nNd);
        return nNd.innerHTML;
    } catch (e) {
        if (window.ActiveXObject) {
            return document.selection.createRange();
        } else {
            return getSelection();
        }
    }
}

$(function() {
    $('#changeColor').click( function() {
        var val = prompt("give me value");
        var mytext = selectHTML();
        $('span').addClass('highlight').attr('data-id',val);
    });
});

.highlight{
color:red;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>
<input id="changeColor" type="button" value="Select text and Change Style" />

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

How to get highlighted words and wrap it in new element with data-attribute?

javascript

jquery

html

css

html5-data