Question

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

$("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;
    }
}

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

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

Answer 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));

Answer 2

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

Answer 3

尝试修剪选区并替换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 ) ); 
    }
});

Answer 4

未经测试，但应该有效：

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

Answer 5

我认为你需要替换段落中的文字，而不是使用wrap。

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

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

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

5 个答案: