使用跨度图像环绕所选文本

Question

我有div，其中包含文字和图片。

<div>
    Some text
    <img src="image.jpg">
     More text
 </div> 

我需要用span标签包围所选文本，我知道如何使用简单文本进行操作，但是当div中有图像时我不知道该怎么做。 有办法吗？

我需要更改源代码，而不仅仅是文本，以便我可以为选定的文本添加一些CSS样式。

Answer 1

这个答案假定你想使用客户端技术（这里是：jQuery）来修改DOM。

如果您希望所有内容都包含在一个范围内，请使用wrapAll（）：

$( "div" )
  .contents()
  .wrapAll( "<span>" );

如果只希望文本节点包含在span中，请进行一些过滤：

$( "div" )
  .contents()
  .filter(function(){return this.nodeType === 3})
  .wrapAll( "<span>" );

最后，如果您需要包含在自己的span中的每个节点，请使用wrap（）而不是wrapAll（）。您也可以将其与过滤相结合。

修改

如果您需要使用带标记的文字，可以将其与此问题的解决方案结合使用：Get the Highlighted/Selected text

我会说这样的事情应该有效：

function getSelectionObj() {
    if (window.getSelection) {
        return window.getSelection();
    } else if (document.selection && document.selection.type != "Control") {
        return document.selection.createRange();
    }
}

$("button").click(function (){
    var o = getSelectionObj();
    if(o.anchorNode == null)
        return;

    var $node1 = $(o.anchorNode);
    var $node2 = $(o.focusNode);

    var $content = $node1.nextUntil($node2).andSelf();

    $content.wrapAll( "<span>" );
});

Answer 2

你试过这个吗？

<div>
    <span>Some text</span>
    <img src="image.jpg">
     <span>More text</span>
 </div>