How to highlight user selected text within a piece of text which has already been highlighted?

For those who would like to know in the future this is how I did it.

For those who would like to know in the future this is how I did it: jQuery.fn. Ghlight = function(startOffset,endOffset,type) { function inner startOffset,endOffset) { var calledStartOffset = parseInt(startOffset); var startOffsetNode=getChildNodeForOffset(node,parseInt(startOffset)); var endOffsetNode=getChildNodeForOffset(node,parseInt(endOffset)); startOffset = resizeOffsetForNode(startOffsetNode,parseInt(startOffset)); if (startOffsetNode == endOffsetNode){ endOffset = resizeOffsetForNode(endOffsetNode,parseInt(endOffset)); highlightSameNode(startOffsetNode, parseInt(startOffset),parseInt(endOffset),type,calledStartOffset); } else { highlightDifferentNode(startOffsetNode,endOffsetNode,parseInt(startOffset),parseInt(endOffset),type,calledStartOffset); } } return this. Each(function() { inner startOffset,endOffset); }); }; function resizeOffsetForNode(offsetNode,offset){ if (offsetNode.Id >= 0){ offset = parseInt(offset)-parseInt(offsetNode.

Id); } else if (offsetNode. PreviousSibling! = null && offsetNode.previousSibling.

Id > 0){ offset = parseInt(offset)-parseInt(offsetNode.previousSibling. Id)-parseInt(offsetNode.previousSibling.textContent. Length); } return offset; } function getChildNodeForOffset(testNode,offset) { if (testNode.

NodeType == 1 && testNode. ChildNodes &&! /(script|style)/i.

Test(testNode. TagName)) { var offsetNode=null; var currentNode; for (var I = 0; I = 0 && parseInt(currentNode.Id) = parseInt(offset))){ offsetNode = currentNode; break; } else if (currentNode. Id >= 0 && parseInt(currentNode.

Id) > parseInt(offset)){ offsetNode = currentNode. PreviousSibling; break; } } if (offsetNode==null){ offsetNode = testNode. ChildNodestestNode.childNodes.

Length-1; } return offsetNode; } } function highlightSameNode(node, startOffset,endOffset,type,calledStartOffset) { var skip = 0; if (node. NodeType == 3) { if (startOffset >= 0) { var spannode = document. CreateElement('span'); spannode.

ClassName = 'entity '+ type; spannode.Id=calledStartOffset; var middlebit = node. SplitText(startOffset); var endbit = middlebit. SplitText(endOffset-startOffset); var middleclone = middlebit.

CloneNode(true); spannode. AppendChild(middleclone); middlebit.parentNode. ReplaceChild(spannode, middlebit); } } else if (node.

NodeType == 1 && node. ChildNodes &&! /(script|style)/i.

Test(node. TagName)) { var childnode = node. ChildNodes0; highlightSameNode(childnode, startOffset,endOffset,type,calledStartOffset); } } function highlightDifferentNode(startnode, endnode, startOffset,endOffset,type,calledStartOffset) { var skip = 0; if (startnode.

NodeName == "#text") { if (startOffset >= 0) { var spannode = document. CreateElement('span'); spannode. ClassName = 'entity '+ type; spannode.Id=calledStartOffset; var endbit = node.

SplitText(startOffset); var endclone = endbit. CloneNode(true); spannode. AppendChild(endclone); endbit.parentNode.

ReplaceChild(spannode, endbit); } } else if (startnode. NodeName == "SPAN") { if (startOffset >= 0) { var spannode = document. CreateElement('span'); spannode.

ClassName = 'entity '+ type; spannode. Id=calledStartOffset; var endTextbit = startnode. ChildNodes0.

SplitText(startOffset); spannode. AppendChild(endTextbit); startnode.parentNode. InsertBefore(spannode, startnode.

NextSibling); } } var currentTestNode=startnode. NextSibling; while (currentTestNode! =endnode){ if (currentTestNode.

NodeName == "#text") { var spannode = document. CreateElement('span'); spannode. ClassName = 'entity '+ type; spannode.

Id=parseInt(currentTestNode.previousSibling. Id)+parseInt(currentTestNode.previousSibling.textContent. Length); var currentNodeClone=currentTestNode.

CloneNode(true); spannode. AppendChild(currentNodeClone); endbit.parentNode. ReplaceChild(spannode, currentTestNode); } else if (currentTestNode.

NodeName == "SPAN") { currentTestNode. ClassName = 'entity overlap'; } currentTestNode=currentTestNode. NextSibling; } var previousNodeEnd = parseInt(endnode.previousSibling.

Id)+parseInt(endnode.previousSibling.textContent. Length); var spannode = document. CreateElement('span'); spannode.

ClassName = 'entity '+ type; spannode. Id=previousNodeEnd; if (endnode. NodeName == "#text") { if (endOffset >= 0) { //end offset here is the original end offset from the beginning of the text, not node var unwantedbit = endnode.

SplitText(parseInt(endOffset)-parseInt(previousNodeEnd)); var endclone = endnode. CloneNode(true); spannode. AppendChild(endclone); endnode.parentNode.

ReplaceChild(spannode, endnode); } } else if (endnode. NodeName == "SPAN") { if (endOffset >= 0) { var wantTextbit = endnode. ChildNodes0.

SplitText(parseInt(endOffset)-parseInt(previousNodeEnd)); spannode. AppendChild(wantTextbit); wantTextbit.parentNode.parentNode. InsertBefore(spannode, endnode); } } if (startnode.textContent.

Length Length Find("span. Entity"). Each(function() { this.parentNode.firstChild.

NodeName; with (this. ParentNode) { replaceChild(this. FirstChild, this); normalize(); } }).end(); }; function contains(a, b){ return a.

Contains? A! = be && a.

Contains(b) :!(a. CompareDocumentPosition(b) & 16); }.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.