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

时间:2018-04-10 13:33:26

标签: javascript jquery

我一直试图有一个&#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;功能,但我努力使一切工作。

&#13;
&#13;
.highlighted:not(:last-child) {
  margin-right: 1em;
}
&#13;
<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>
&#13;
uuid()
&#13;
&#13;
&#13;

0 个答案:

没有答案