Javascript 如何在JQuery中将标记添加到选定文本

例如，我有一个很大的段落

<p> hello this is my paragraph </p>

因此，我想在整个文本中为所选文本添加一个标记 因此，如果我在我的段落中强调 我希望这一段如下

<p> hello this is <span>my paragraph</span></p>

---

谢谢大家

如下图所示，找到欲望并用span包装

$p：包含“我的段落”。htmlfunction，html{ 返回html.replace/my段落/g，“$1”； }; .你们班{ 背景颜色：红色 }

---

您好，这是我的段落

您可以使用javascript轻松完成这项工作，方法是为此使用surroundContents

<div onclick="addSpanEle()">hello this is my paragraph</div>

function addSpanEle() {
    var span = document.createElement("span");

    if (window.getSelection) {
        var selectedText = window.getSelection();
        if (selectedText.rangeCount) {
            var range = selectedText.getRangeAt(0).cloneRange();
            range.surroundContents(span);
            selectedText.removeAllRanges();
            selectedText.addRange(range);
        }
    }
}

对于jquery：请在此处查看fiddle演示：

---

礼貌：

良好的开端，但他希望能够选择div中的文本。请尝试以下操作：

HTML:

JS:

---

我正在搜索您的答案，发现：

下面是我从提供的链接复制的主代码

<p> My sample paragraph </p>

<style>
    span {color: red;}
</style>
<script type="text/javascript">

    function getSelectedText() {
        t = (document.all) ? document.selection.createRange().text : document.getSelection();
        return t;
    }

    $('body').mouseup(function(){
        var selection = getSelectedText();
        var selection_text = selection.toString();

        // How do I add a span around the selected text?

        var span = document.createElement('SPAN');
        span.textContent = selection_text;

        var range = selection.getRangeAt(0);
        range.deleteContents();
        range.insertNode(span);
    });

</script>

---

可能的重复：OP想要的是jquery答案，而不是jsp。这是一个非常基本的问题，您显然需要仔细研究一下。我用类似的代码为我正在编写的POS软件制作了一个软键盘。不知怎的，那个小提琴被删除了。试试这个：

.selectMe {
  margin-bottom: 2em;
}

button {
  cursor: pointer;
}

.highlight {
  background-color: red;
}

if (!window.x) {
  x = {};
}

x.Selector = {};
x.Selector.getSelected = function() {
  var t = '';
  if (window.getSelection) {
    t = window.getSelection();
  } else if (document.getSelection) {
    t = document.getSelection();
  } else if (document.selection) {
    t = document.selection.createRange().text;
  }
  return t;
}

$(document).ready(function() {
  $("#highlight").click(function() {
    var selText = x.Selector.getSelected();
    console.log(selText.focusNode);
    if (selText.focusNode.length > 0) {
      var para = $(".selectMe").text();
      para = para.replace(selText, '<span class="highlight">' + selText + '</span>');
      $(".selectMe").html(para);
    } else {

    }
  });
});

<p> My sample paragraph </p>

<style>
    span {color: red;}
</style>
<script type="text/javascript">

    function getSelectedText() {
        t = (document.all) ? document.selection.createRange().text : document.getSelection();
        return t;
    }

    $('body').mouseup(function(){
        var selection = getSelectedText();
        var selection_text = selection.toString();

        // How do I add a span around the selected text?

        var span = document.createElement('SPAN');
        span.textContent = selection_text;

        var range = selection.getRangeAt(0);
        range.deleteContents();
        range.insertNode(span);
    });

</script>