jquery - 如何将所选文本包装到`span`元素中

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

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

.highlight{
    background:yellow;
}

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

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

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

最佳答案

尽管不是世界上最漂亮的代码，但这只是一个开始。虽然这将使突出显示的位保持突出显示，但是我想您可以添加代码以自己清除此问题。

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>'));
  }
});

.highlight {
       background: yellow;
     }

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