jQuery問題。當變量中的.find（）項與多個匹配時

我的目標是讓用戶使用光標選擇文本並將選擇輸出到不同的div中，並使用<span>標記中的突出顯示的文本。jQuery問題。當變量中的.find（）項與多個匹配時

所以，有我的選擇設置是這樣的：

var sel = jQuery.selection();

然後我用選擇到<span>並輸出：

var $title = jQuery(this).parent().find('.title').text(); 
var $result; 
$result = $title.replace(sel, '<span>'+sel+'</span>'); 

// output result 
jQuery(this).parent().find('.output').html($result);

它工作正常。

問題是，如果文本包含相同的術語兩次，並且用戶選擇第二個術語，它將查找並替換第一個術語。

例如，隨機文本：

hello world lorem ipsum hello

如果用戶選擇第二hello，它將包裹的第一個。

是否有解決方案來解決這種類型的情況？

jsFiddle進行測試。

來源

2016-04-15 Henrik Petterson

資格的時候我會賞金這個問題與50分。 –

這實際上是一個非常有趣的問題+1 - 我不知道是否有一種方法可以在執行replace（）時針對特定的匹配匹配項... –

您的意思是說用戶選擇第二項，那麼第一項不應該是改變 –

得到抵消，從中可以開始更換...

$('button').click(function() { 
    var sel = jQuery.selection(); 
    var $title = jQuery(this).parent().find('.title').text(); 
    var $result; 
    var highlightFrom = window.getSelection().anchorOffset; 


    $result = $title.substr(0,highlightFrom) + $title.substr(highlightFrom, $title.length).replace(sel, '<span>' + sel + '</span>'); 


    // output result 
    jQuery(this).parent().find('.output').text($result); 
});

在你的樣品，highlighfrom選擇第二個招呼時給出24。

Updated Fiddle

AnchorOffset由IE9 +等主流瀏覽器的支持。如果你需要一個有效的替代，我指的是四肢修長的規定在這裏： AnchorOffset alternative

見here for more info on textselection ranges and browser compatibility

檢測過 - 鉻，IE11 +，FF

來源

2016-04-15 11:13:40 Yoeri

This是一個實驗技術（在鉻壽工作） - https://developer.mozilla.org/en-US/docs/Web/API/Selection/anchorOffset –

雖然這確實給出了所需的輸出。正如Gene所述，有一個瀏覽器兼容性的問題。感謝您發佈不管。 –

增加了一個替代方案......它被大多數瀏覽器支持，儘管... – Yoeri

我知道，還有一個問題與瀏覽器兼容性，使用錨點偏移量。但是我想到的第一件事就是將給定的字符串分成三部分。選擇前的部分，選定的部分和其餘部分。然後包裝選擇的一部分，並再次把它們放在一起......

$('button').click(function() { 
    var $sel = jQuery.selection(); 
    var $highlightStart = window.getSelection().anchorOffset; 
    var $highlightEnd = window.getSelection().focusOffset; 

    var $title = jQuery(this).parent().find('.title').text(); 
    var $textLength = $title.length; 

    var $textBefore = $title.substr(0,$highlightStart); 
    var $textToWrap = $title.substr($highlightStart, $highlightEnd - $highlightStart); 
    var $textAfter = $title.substr($highlightEnd, $textLength - $highlightEnd); 

    var $result; 
    $result = $textBefore + '<span>' + $textToWrap + '</span>' + $textAfter; 

    // output result 
    jQuery(this).parent().find('.output').text($result); 
});

https://jsfiddle.net/sqd5gsz5/6/

來源

2016-04-15 11:32:46 errand

jQuery問題。當變量中的.find（）項與多個匹配時

回答

相關問題