jQuery选择文本并在段落中添加跨度答案

【问题标题】：jQuery select text and add span to it in an paragraphjQuery选择文本并在段落中添加跨度
【发布时间】：2011-01-15 06:30:16
【问题描述】：

我有一个函数可以获取选定的文本，通过鼠标选择文本，并将其添加到变量中。我想在所选文本中的该变量周围添加标签 - 在该段落中。

$("p").live("mouseup",function() {
    selection = getSelectedText();
    if(selection.length >= 3) {
        var $spn = $("<span></span>").html(selection).addClass("selected");
        $("p").wrap($spn);
    }
});

//Grab selected text
function getSelectedText(){
    if(window.getSelection){
        return window.getSelection().toString();
    }
    else if(document.getSelection){
        return document.getSelection();
    }
    else if(document.selection){
        return document.selection.createRange().text;
    }
}

我可以获得文本选择变量，但不是将 放在段落 中的选定文本周围，而是我的函数将其包装在外面。

如何在段落中替换它？谢谢。

【问题讨论】：

按照您的要求去做通常非常困难。您确定段落下没有嵌套标签吗？如果有的话，在不破坏当前架构的情况下可能很难做到。
段落下除了新创建的spans外，不应有任何其他标签。

标签： jquery select text

【解决方案1】：

这是出错的地方：

var $spn = $("<span></span>").html(selection).addClass("selected");
$("p").wrap($spn);

这意味着您将span 包裹在段落周围。

我认为你的意思是这样做：

var spn = '<span class="selected">' + selection + '</span>';
$(this).html($(this).html().replace(selection, spn));

【讨论】：

$spn 是 jQuery，而不是字符串。
我的文本被替换为 [object Object]，没有。我的变量有问题吗？
效果更好，现在我得到：selected跨度解析不正确，我得到>而不是
知道了！ $(this).html($(this).html().replace(selection, spn));我已将文本更改为 html。谢谢大家的支持！
这段代码也有bug。如果您有多个单词出现，此代码将始终换行第一次出现的单词，而不是实际选择的文本。

【解决方案2】：

尝试修剪选择并替换 html 内部的换行符。这很有帮助：

$('#tweet_contents').live("mouseup",function() {
    selection = getSelectedText().replace(/^\s+|\s+$/g,"");

    if(selection.length >= 4) {
        var spn = '<span id=\"selected\" class=\"polarite\"  selcount=\"'+selcounter+'\" >'+selection+'<span id=\"superscript\">'+selcounter+'<\/span>'+'<\/span>';

    $(this).html( $(this).html().replace(/(\r\n|\n|\r)/gm," ").replace(selection, spn ) ); 
    }
});

【讨论】：

【解决方案3】：

使用.wrapInner() 代替.wrap()

【讨论】：

【解决方案4】：

我认为您需要替换段落中的文本，而不是使用换行。

$("p").live("mouseup",function() {
   selection = getSelectedText();
   if(selection.length >= 3) {
      var spn = "<span class='selected'>" + selection + "</span>");
      var html = $(this).html().replace(selection,spn);
      $(this).html(html);
    }
});

请注意，这只有在段落仅包含文本且没有标记时才能可靠地工作。

【讨论】：

例如，如果我跨多个标签选择了文本，这将不起作用。如果 p 是这样的：Some text 并且我选择 'ome tex'，您的方法将不会替换任何内容。
@subtenante - 我知道 - 我在答案的末尾注意到了这一点，但如果修改选择算法以找到 DOM 的匹配部分并选择整个 html（不是文本）。对于仅包含文本的简单段落，它可以工作（一次）。
是的，我只是明确说明了它不起作用的原因。 :)

【解决方案5】：

未经测试，但应该可以工作：

$("p").live("mouseup",function() {
selection = getSelectedText();
if(selection.length >= 3) {
var $spn = $("<span></span>").html(selection).addClass("selected");
$(this).html($(this).html().replace(selection, $spn);
}
});

【讨论】：

$spn 是 jQuery，而不是字符串。
我用这个： $(document).ready(function(){ $("p").live("mouseup",function() { selection = getSelectedText(); if(selection.长度 >= 3) { var $spn = $("").html(selection).addClass("selected"); $(this).html($(this).html() .replace(selection, $spn)); } }); 似乎我失去了我的变量，段落中的选择有效，但它被替换为 [object Object] 文本 - 没有跨度
哦，我的错...我只是查看了替换部件，我想其余的已经工作了。