Replacing the nth location of selected text with jQuery
I have the following div:
<div id="target" >hello(first), hello(second), hello(third), hello(fourth)</div>
and the following code based on this discussion :
$(document).ready(function(){
$('#target').bind('mouseup', function(){
var needle = window
.getSelection()
.getRangeAt(0);
var haystack = $(this).text();
var newText = haystack.replace(needle,'<span class="highlight">' + needle + '</span>');
$(this).html(newText);
});
When I select one of “hello”, it “randomly” selects one of them, and not the selected “hello”.
How to highlight selected?
Thanks in advance for your help.
+3
1 answer
Here is what seems to work well:
$('#target').bind('mouseup', function(){
var needle = window.getSelection().getRangeAt(0);
var start = window.getSelection().anchorOffset;
var end = window.getSelection().focusOffset;
var haystack = $(this).text();
var startHighlight = '<span class="highlight">';
var endHighlight = '</span>';
var nodeContent = window.getSelection().anchorNode.textContent;
// If the selection goes backward, switch indexes
if (end < start)
{
var tmp = start;
start = end;
end = tmp;
}
// If there is a span
if ($('span', this).size() > 0)
{
// If the selection starts after the span, compute an offset for start and end
if (haystack.substr(0, nodeContent.length) != nodeContent)
{
var diff = $(this).html().indexOf(startHighlight) + $('span', this).text().length;
start += diff;
end += diff;
}
// Remove the span
var spanText = $('span', this).contents().filter(textNodeFilter);
$(spanText).unwrap();
}
var newText = haystack.substring(start, end).replace(needle, startHighlight + needle + endHighlight);
haystack = haystack.substring(0, start) + newText + haystack.substring(end);
$(this).html(haystack);
});
+1