使用

<template><div class="app"><li class="main_right-btn" @click="selectionColor('yellow')">題干標識</li><li class="main_right-btn" @click="selectionColor('transparent')">取消標識</li><li class="main_right-btn">撤銷</li><li class="main_right-btn">恢復</li><li class="main_right-btn" @click="copyText">復制</li><li class="main_right-btn" @click="cutstrText">剪切</li><li class="main_right-btn" @click="pasteText">粘貼</li><textarea id="examText"></textarea></div>
</template><script>
import Mark from '@/utils/TextMark'
export default {components: {},data() {return {}},mounted() {},computed: {},methods: {// 剪切文字方法cutstrText() {this.copyVal = Mark.cutstr('examText')console.log('    this.copyVal ',    this.copyVal );},// 粘貼文字方法pasteText() {Mark.parsestr('examText', this.copyVal)},// 復制當前文字方法copyText() {this.copyVal = Mark.getSelectedText()?.trim()},// 標識文字方法selectionColor(color) {Mark.ColorizeSelection(color)},}
}
</script>
<style scoped  lang="less"></style>

庫內容

const Mark = {// 標記方法 SGetNextLeaf: function (node) {while (!node.nextSibling) {node = node.parentNodeif (!node) {return node}}var leaf = node.nextSiblingwhile (leaf.firstChild) {leaf = leaf.firstChild}return leaf},GetPreviousLeaf: function (node) {while (!node.previousSibling) {node = node.parentNodeif (!node) {return node}}var leaf = node.previousSiblingwhile (leaf.lastChild) {leaf = leaf.lastChild}return leaf},// If the text content of an element contains white-spaces only, then does not need to colorizeIsTextVisible: function (text) {for (var i = 0; i < text.length; i++) {if (text[i] != ' ' && text[i] != '\t' && text[i] != '\r' && text[i] != '\n') return true}return false},ColorizeLeaf: function (node, color) {if (!Mark.IsTextVisible(node.textContent)) returnvar parentNode = node.parentNodeif (!parentNode) return// if the node does not have siblings and the parent is a span element, then modify its colorif (!node.previousSibling && !node.nextSibling) {if (parentNode.tagName.toLowerCase() == 'span') {parentNode.style.backgroundColor = colorreturn}}// Create a span element around the nodevar span = document.createElement('span')span.style.backgroundColor = colorvar nextSibling = node.nextSiblingparentNode.removeChild(node)span.appendChild(node)parentNode.insertBefore(span, nextSibling)},ColorizeLeafFromTo: function (node, color, from, to) {var text = node.textContentif (!Mark.IsTextVisible(text)) returnif (from < 0) from = 0if (to < 0) to = text.lengthif (from == 0 && to >= text.length) {// to avoid unnecessary span elementsMark.ColorizeLeaf(node, color)return}var part1 = text.substring(0, from)var part2 = text.substring(from, to)var part3 = text.substring(to, text.length)var parentNode = node.parentNodevar nextSibling = node.nextSiblingparentNode.removeChild(node)if (part1.length > 0) {var textNode = document.createTextNode(part1)parentNode.insertBefore(textNode, nextSibling)}if (part2.length > 0) {var span = document.createElement('span')span.style.backgroundColor = colorvar textNode = document.createTextNode(part2)span.appendChild(textNode)parentNode.insertBefore(span, nextSibling)}if (part3.length > 0) {var textNode = document.createTextNode(part3)parentNode.insertBefore(textNode, nextSibling)}},ColorizeNode: function (node, color) {var childNode = node.firstChildif (!childNode) {Mark.ColorizeLeaf(node, color)return}while (childNode) {// store the next sibling of the childNode, because colorizing modifies the DOM structurevar nextSibling = childNode.nextSiblingMark.ColorizeNode(childNode, color)childNode = nextSibling}},ColorizeNodeFromTo: function (node, color, from, to) {var childNode = node.firstChildif (!childNode) {Mark.ColorizeLeafFromTo(node, color, from, to)return}for (var i = from; i < to; i++) {Mark.ColorizeNode(node.childNodes[i], color)}},ColorizeSelection: function (color) {if (!!window.ActiveXObject || 'ActiveXObject' in window) {document.execCommand('BackColor', false, color)return}// all browsers, except IE before version 9if (window.getSelection) {var selectionRange = window.getSelection()if (selectionRange.isCollapsed) {return}var range = selectionRange.getRangeAt(0)// store the start and end points of the current selection, because the selection will be removedvar startContainer = range.startContainervar startOffset = range.startOffsetvar endContainer = range.endContainervar endOffset = range.endOffset// because of Opera, we need to remove the selection before modifying the DOM hierarchyselectionRange.removeAllRanges()if (startContainer == endContainer) {//同一個節點時，直接標記顏色Mark.ColorizeNodeFromTo(startContainer, color, startOffset, endOffset)} else {if (startContainer.firstChild) {var startLeaf = startContainer.childNodes[startOffset]} else {//標記第一段節點var startLeaf = Mark.GetNextLeaf(startContainer)Mark.ColorizeLeafFromTo(startContainer, color, startOffset, -1)}if (endContainer.firstChild) {if (endOffset > 0) {var endLeaf = endContainer.childNodes[endOffset - 1]} else {var endLeaf = Mark.GetPreviousLeaf(endContainer)}} else {var endLeaf = Mark.GetPreviousLeaf(endContainer)Mark.ColorizeLeafFromTo(endContainer, color, 0, endOffset)}while (startLeaf) {var nextLeaf = Mark.GetNextLeaf(startLeaf)Mark.ColorizeLeaf(startLeaf, color)if (startLeaf == endLeaf) {break}startLeaf = nextLeaf}}} else {// Internet Explorer before version 9document.execCommand('BackColor', false, color)}},// 標記方法 E// 粘貼方法parsestr(dom, myValue) {if (!myValue) returnlet myField = document.getElementById(dom)//IE supportif (document.selection) {myField.focus()sel = document.selection.createRange()sel.text = myValuesel.select()}//MOZILLA/NETSCAPE supportelse if (myField.selectionStart || myField.selectionStart == '0') {var startPos = myField.selectionStartvar endPos = myField.selectionEndvar restoreTop = myField.scrollTopmyField.value =myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length)if (restoreTop > 0) {myField.scrollTop = restoreTop}myField.focus()myField.selectionStart = startPos + myValue.lengthmyField.selectionEnd = startPos + myValue.length} else {myField.value += myValuemyField.focus()}},// 復制方法getSelectedText() {return window.getSelection().toString()},// 剪切方法cutstr(id){// 獲取Textarea元素var textarea = document.getElementById(id);// 獲取選中文本的起始和結束位置var selectionStart = textarea.selectionStart;var selectionEnd = textarea.selectionEnd;// 提取選中的文本var selectedText = textarea.value.substring(selectionStart, selectionEnd);// 刪除選中的文本textarea.value = textarea.value.substring(0, selectionStart) + textarea.value.substring(selectionEnd);// 將選中的文本剪切到剪貼板document.addEventListener('cut', function(e) {// 將光標移到Textarea內部textarea.focus();e.clipboardData.setData('text/plain', selectedText);e.preventDefault();});// 執行剪切操作document.execCommand('cut');return selectedText;}
}
export default Mark