我一直试图有一个＆＃34;显示亮点＆＃34;按钮，显示文章中所有突出显示的文本。我已经设法让其他所有工作与＆＃34;显示亮点＆＃34;按钮本身。基本上，highlights需要添加到selected_highlights，允许通过单击按钮来显示var lastSelection;
document.addEventListener("selectionchange", function() {
lastSelection = window.getSelection();
});
var showBtn = document.getElementById('show_highlights_btn');
//var highlights = document.getElementById("highlights");
var highlights = document.createElement('div');
function getRightClick(e) {
var rightclick;
if (!e) var e = window.event;
if (e.which) rightclick = (e.which == 3);
else if (e.button) rightclick = (e.button == 2);
return rightclick; // true or false
}
function br() {
return document.createElement('br');
}
function getSelectionCharacterOffsetsWithin(btnColor) {
var selectedText = "null";
if (typeof window.getSelection != "undefined") {
var selection = window.getSelection();
selectedText = selection.toString();
var range = selection.getRangeAt(0);
//Strip trailing punctation
selectedText = selectedText.replace(/[\s.,!?:;'"-]+$/, "");
//Leading space / quotes
var offset = 0;
var match = selectedText.match(/^[\s"']+/);
if (match)
offset = match[0].length;
selectedText = selectedText.replace(/^[\s"']+/, "");
if (selectedText === "") {
alert("Error: you must select at least one character");
tartOffset = 0, endOffset = 0, selectedText = "null";
} else {
var newInputid = parseInt(Math.random() * 10000);
//This is code to keep word highlighted after selecting
var newNode = document.createElement("span");
newNode.classList.add('chosen');
var previd = ("i" + newInputid);
newNode.setAttribute('data-cid', previd);
newNode.appendChild(range.extractContents());
newNode.style.backgroundColor = btnColor;
range.insertNode(newNode);
}
}
return {
text: selectedText,
cid: previd
};
}
$('.article').mousedown(function(event) {
$('body').attr('mouse-top', event.clientY + window.pageYOffset);
$('body').attr('mouse-left', event.clientX);
if (!getRightClick(event)) {
$('.entity_types').hide();
document.getSelection().removeAllRanges();
}
});
$('.article').mouseup(function(event) {
if (lastSelection.toString().length > 1 && !getRightClick(event)) {
$('.entity_types').css({
display: 'block',
position: 'absolute',
top: event.clientY + 15,
left: event.clientX + 10
});
}
});
$('.entity_types button').on('click', function(e) {
e.preventDefault();
var btnColor = $(this)[0].style.color;
var selOffsets = getSelectionCharacterOffsetsWithin(btnColor);
var selectedText = selOffsets.text;
var selectedID = selOffsets.cid
var txt = document.createTextNode(selectedText);
var span = document.createElement('span');
span.appendChild(txt);
span.setAttribute('data-cid', selectedID);
span.classList.add('highlighted');
highlights.appendChild(span);
});
showBtn.addEventListener('click', function () {
console.log("display button");
var selected_highlights = document.getElementById("highlights");
/** first remove current text **/
while (selected_highlights.hasChildNodes()) {
selected_highlights.removeChild(selected_highlights.lastChild);
}
for (i = 0; i < highlights.innerHTML.length; i++) {
console.log('display highlight');
selected_highlights.appendChild(highlights.childNodes[i]);
selected_highlights.appendChild(br());
}
});
$('.article').on('dblclick', '.chosen', function() {
var cid = this.getAttribute('data-cid');
highlights.querySelector('[data-cid=' + cid + ']').remove();
(this).replaceWith(this.innerText);
});。
我应该将所有内容重构为jQuery DOM处理或原生DOM apis，因此它不会搞砸＃34;删除突出显示＆＃34;功能，但我努力使一切工作。
.highlighted:not(:last-child) {
margin-right: 1em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='entity_class' class="entity_types">
<button class="btn" style="color:green">Class 1</button>
<button class="btn" style="color:red">Class 2</button>
<button class="btn" style="color:purple">Class 3</button>
</div>
<div class="article" style="overflow-x:auto;">
What is missing from this statement, and likely to be asked by lawmakers, is why it took a newspaper to discover this breach of Facebook's systems. And, once Facebook knew, why it didn't notify the public and regulators immediately - instead of doing
everything it could to block the story.
</div>
<br>
<button id="show_highlights_btn" type="button">Show highlights</button>
<div id="highlights"></div>uuid()