jQuery選擇文本並在段落中添加跨度

我有一個函數可以獲取選定的文本，文本是通過鼠標選擇的，並將其添加到變量中。我想在選定的文本中圍繞該變量添加標籤 - 在該段落中。jQuery選擇文本並在段落中添加跨度

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

我可以選擇的文本變量，但不是從段落<p>放置<span></span>選定的文本週圍，我的功能包裝此之外。

如何在段落中替換它？謝謝。

來源

2010-02-10 Mircea

通常很難做到你所要求的。你確定段落下沒有嵌套標籤嗎？如果有的話，在不破壞當前體系結構的情況下可能會非常困難。 – glmxndr 2010-02-10 13:19:41

除了新創建的跨度外，該段落下不應該有任何其他標籤。 – Mircea 2010-02-10 13:56:07

這是它出錯：

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

來源

2010-02-10 13:16:14

$ spn是jQuery，不是字符串。 – tvanfosson 2010-02-10 13:20:30

我的文本被替換爲[object object]，沒有。我的變量有什麼問題嗎？ – Mircea 2010-02-10 13:33:11

工作得更好，現在我得到： <跨度類=「選擇」 >選擇</SPAN > 跨度不解析正確的，我得到>而不是<> – Mircea 2010-02-10 13:37:46

未經檢驗的，但應該工作：

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

來源

2010-02-10 13:17:34 Daan

$ spn是jQuery，不是字符串。 – tvanfosson 2010-02-10 13:19:45

我使用這個： $（document）.ready（function（）{ $（「p」）。如果（selection.length> = 3）var $ spn = $（「」）.html（選擇）.addClass（「selected（）」）選項=函數（）{select_getSelectedText();「）; $（this）.html（$（this）.html（）。replace（selection，$ spn））; } }）; 似乎我失去了我的變形，段落中的選擇工作，但它被替換爲[object Object]文本 - 沒有範圍 – Mircea 2010-02-10 13:31:33

哦，我的壞...我只是看着更換的部分，我認爲其餘的已經工作。 – Daan 2010-02-10 15:29:02

我想你會需要替換段落中的文字，不得使用包。

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

請注意，只有段落僅包含文本且沒有標記時，才能可靠地工作。

來源

2010-02-10 13:19:20 tvanfosson

例如，如果我在幾個標籤中選擇文本，這將不起作用。如果p是這樣的：'

一些文本

'我選擇'ome tex'，你的方法不會取代任何東西。 – glmxndr 2010-02-10 13:23:23

@subtenante - 我知道 - 我在答案的末尾註意到了這一點，儘管如果選擇算法被修改以找到DOM的匹配部分並選擇整個html（而不是文本），它就可以工作。對於僅包含文本的簡單段落，它將起作用（一次）。 – tvanfosson 2010-02-10 13:30:57

是的，我只是明確說明爲什麼它不起作用。 :) – glmxndr 2010-02-10 13:42:36

使用.wrapInner()而不是.wrap()

來源

2010-02-10 13:20:47

嘗試修剪的選擇和替換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)); 
    } 
});

來源

2012-07-19 15:42:30 alemol

jQuery選擇文本並在段落中添加跨度

回答

相關問題