js实现让用户选择当前文本进行标记为黄色和取消标记为白色

可以将当前选择的文字进行标记为其他颜色

	<div onclick="ITEM.mark.ColorizeSelection('yellow');">标识</div >
	<div onclick="ITEM.mark.ColorizeSelection('')">取消</div >
   //标记类库
  if(!ITEM.mark){
    ITEM.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 (!ITEM.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 (!ITEM.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
          ITEM.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) {
          ITEM.mark.ColorizeLeaf(node, color);
          return;
        }
  
        while (childNode) {
          // store the next sibling of the childNode, because colorizing modifies the DOM structure
          var nextSibling = childNode.nextSibling;
          ITEM.mark.ColorizeNode(childNode, color);
          childNode = nextSibling;
        }
      },
      ColorizeNodeFromTo:function (node, color, from, to) {
        var childNode = node.firstChild;
        if (!childNode) {
          ITEM.mark.ColorizeLeafFromTo(node, color, from, to);
          return;
        }
  
        for (var i = from; i < to; i++) {
          ITEM.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) {
            //同一个节点时,直接标记颜色
            ITEM.mark.ColorizeNodeFromTo(startContainer, color, startOffset, endOffset);
          } else {
            if (startContainer.firstChild) {
              var startLeaf = startContainer.childNodes[startOffset];
            } else {
              //标记第一段节点
              var startLeaf = ITEM.mark.GetNextLeaf(startContainer);
              ITEM.mark.ColorizeLeafFromTo(startContainer, color, startOffset, -1);
            }
  
            if (endContainer.firstChild) {
              if (endOffset > 0) {
                var endLeaf = endContainer.childNodes[endOffset - 1];
              } else {
                var endLeaf = ITEM.mark.GetPreviousLeaf(endContainer);
              }
            } else {
              var endLeaf = ITEM.mark.GetPreviousLeaf(endContainer);
              ITEM.mark.ColorizeLeafFromTo(endContainer, color, 0, endOffset);
            }
  
            while (startLeaf) {
              var nextLeaf = ITEM.mark.GetNextLeaf(startLeaf);
              ITEM.mark.ColorizeLeaf(startLeaf, color);
              if (startLeaf == endLeaf) {
                break;
              }
              startLeaf = nextLeaf;
            }
          }
        } else {
          // Internet Explorer before version 9
          document.execCommand("BackColor", false, color);
        }
      }
    }
  }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端J先生

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值