如何将 <span> 标签添加到 JQuery 中的选定文本

Question

例如，我有一个像这样的大段落

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

所以我想将标签附加到整个文本中的选定文本 所以如果我强调“我的段落” 我希望段落如下

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

谢谢大家

Answer 1

我正在寻找你的答案，发现：Add tags around selected text in an element。

这是我从提供的链接中复制的主要代码。

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

Answer 2

您可以通过使用surroundContents() 来使用javascript 轻松完成此操作。

<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：在这里查看小提琴演示：http://jsfiddle.net/BGKSN/24/

礼貌：https://stackoverflow.com/a/17836828/10153495

Answer 3

找到欲望包含并用 span 包裹，如下所示。

$("p:contains('my paragraph')").html(function(_, html) {
  return html.replace(/(my paragraph)/g, '<span class="yourclass">$1</span>');
});

.yourclass {
  background-color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p> hello this is my paragraph </p>

Answer 4

好的开始，但他希望能够在 div 中选择文本。试试这个：

HTML：

<div class="selectMe">
  This is some text 'n stuff. Select part of me and cool stuff will happen!
</div>
<button id="highlight">Make Stuff Happen</button>

CSS：

.selectMe {
  margin-bottom: 2em;
}

button {
  cursor: pointer;
}

.highlight {
  background-color: red;
}

JS：

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 {

    }
  });
});