如何将选定的文本包装到`span`元素中

Question

我想将selected包装到span元素中。我怎样才能做到这一点？有人帮我解决这个问题吗？

＆＃13;

＆＃13;

function getSelectionParentElement() {
    var parentEl = null, sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            parentEl = sel.getRangeAt(0).commonAncestorContainer;
            if (parentEl.nodeType != 1) {
                parentEl = parentEl.parentNode;
                console.log("i done", sel.toString()); //i am getting string.
              //this string should wrap in to span element with .highlight class added.
            }
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        parentEl = sel.createRange().parentElement();
    }
    return parentEl;
}

$('p').on('mouseup', function () {
    var textParent = getSelectionParentElement();
});

＆＃13;

.highlight{
    background:yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

＆＃13;

＆＃13;

＆＃13;

我正在为现代浏览器和ie9工作。

result expecting: '<span class="highlight">selected text here </span>'

Answer 1

这是一个开始，虽然不是世界上最美丽的代码。这会突出显示突出显示的位，但我想你可以自己添加代码来清除它。

＆＃13;

＆＃13;

function getSelectionParentElement() {
  var parentEl = null,
      sel;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      parentEl = sel.getRangeAt(0).commonAncestorContainer;
      if (parentEl.nodeType != 1) {
        parentEl = parentEl.parentNode;
        console.log("i done", sel.toString()); //i am getting string.
        //this string should wrap in to span element with .highlight class added.
        return sel.toString();
      }
    }
  } else if ((sel = document.selection) && sel.type != "Control") {
    parentEl = sel.createRange().parentElement();
  }
  return parentEl;
}

$('p').on('mouseup', function() {
  var textParent = getSelectionParentElement();
  if (textParent.length > 3) {
     var fulltxt = $('p').html();
     var regex = new RegExp(textParent, "g");
     $('p').html(fulltxt.replace(regex,'<span class="highlight">'+textParent+'</span>'));
  }
});

＆＃13;

.highlight {
       background: yellow;
     }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

＆＃13;

＆＃13;

＆＃13;