单击以显示突出显示的文本

我一直试图有一个“显示高亮”按钮，显示文章中所有突出显示的文本。 我已经设法让所有其他工作与“显示高亮”按钮本身分开。 基本上，高highlights需要添加到selected_highlights ，允许通过单击按钮显示。

我应该将所有内容重构为jQuery DOM处理或本机DOM api，因此它不会搞乱“删除突出显示”function，但我正在努力使一切正常。

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

 .highlighted:not(:last-child) { margin-right: 1em; } 

  
 Class 1 Class 2 Class 3 
 
 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. 
 
 Show highlights