【无标题】

使用代码

 
    <template>
  <div class="app">
  <div class="main_right-btn" @click="selectionColor('yellow')">题干标识</div >
  <div class="main_right-btn" @click="selectionColor('transparent')">取消标识</div >
    <p>天是一年四季中最美丽的季节之一，也是最富有生机的季节。在这个季节里，大自然给我们带来了很多惊喜和愉悦。在这个季节里，我喜欢去公园里散步，欣赏那里的美景。

走进公园，你会看到一条小路蜿蜒伸向远方。小路两旁种满了各种各样的树木，有高大的梧桐树，还有低矮的桃树和梨树。它们长出了嫩绿的新叶，这些新叶在阳光下闪闪发光，仿佛在向人们报告春天的到来。

沿着小路往前走，你会看到一片盛开的花海。有各种各样</p>
  </div>
</template>

<script>
import Mark from '@/utils/TextMark'
export default {

  components: {

  },
  data() {
    return {
 
    }
  },
  mounted() {
    
  },
  computed: {
  },
  methods: {
     selectionColor(color) {
      Mark.ColorizeSelection(color)
    },
  }
}
</script>

文字标识库

const Mark = {
  GetNextLeaf: function (node) {
    while (!node.nextSibling) {
      node = node.parentNode;
      if (!node) {
        return node;
      }
    }
    var leaf = node.nextSibling;
    while (leaf.firstChild) {
      leaf = leaf.firstChild;
    }
    return leaf;
  },
  GetPreviousLeaf: function (node) {
    while (!node.previousSibling) {
      node = node.parentNode;
      if (!node) {
        return node;
      }
    }
    var leaf = node.previousSibling;
    while (leaf.lastChild) {
      leaf = leaf.lastChild;
    }
    return leaf;
  },
  // If the text content of an element contains white-spaces only, then does not need to colorize
  IsTextVisible: 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)) return;
    var parentNode = node.parentNode;
    if (!parentNode) return;
    // if the node does not have siblings and the parent is a span element, then modify its color
    if (!node.previousSibling && !node.nextSibling) {
      if (parentNode.tagName.toLowerCase() == "span") {
        parentNode.style.backgroundColor = color;
        return;
      }
    }
    // Create a span element around the node
    var span = document.createElement("span");
    span.style.backgroundColor = color;
    var nextSibling = node.nextSibling;
    parentNode.removeChild(node);
    span.appendChild(node);
    parentNode.insertBefore(span, nextSibling);
  },
  ColorizeLeafFromTo: function (node, color, from, to) {
    var text = node.textContent;
    if (!Mark.IsTextVisible(text)) return;

    if (from < 0) from = 0;
    if (to < 0) to = text.length;

    if (from == 0 && to >= text.length) {
      // to avoid unnecessary span elements
      Mark.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.parentNode;
    var nextSibling = node.nextSibling;

    parentNode.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 = color;
      var 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.firstChild;
    if (!childNode) {
      Mark.ColorizeLeaf(node, color);
      return;
    }

    while (childNode) {
      // store the next sibling of the childNode, because colorizing modifies the DOM structure
      var nextSibling = childNode.nextSibling;
      Mark.ColorizeNode(childNode, color);
      childNode = nextSibling;
    }
  },
  ColorizeNodeFromTo: function (node, color, from, to) {
    var childNode = node.firstChild;
    if (!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 9
    if (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 removed
      var startContainer = range.startContainer;
      var startOffset = range.startOffset;
      var endContainer = range.endContainer;
      var endOffset = range.endOffset;
      // because of Opera, we need to remove the selection before modifying the DOM hierarchy
      selectionRange.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 9
      document.execCommand("BackColor", false, color);
    }
  },
};
export default Mark;