zoukankan      html  css  js  c++  java
  • javascript获取选中的文本/html

      首先来谈一下Selection对象和Range对象。

      Selection是window.getSelection()方法返回的一个对象,用于表示用户选中的文本区域。Selection对象表现为一组Range对象。而Range对象表示文档的连续范围区域,例如用户在浏览器窗口中用鼠标拖动选中的区域。通常情况下,Selection对象只有一个Range对象,如下:

      var selectionObj = window.getSelection(); 

      var rangeObj = selectionObj.getRangeAt(0);

      selectionObj为Selection对象,rangeObj为Range对象。

      来个例子:

      var selectionObj = window.getSelection();

      var selectedText = selectionObj.toString();

      selectedText即为用户选中区域的文本。

      如果想获取选中部分的html代码,就需要用到Range对象的cloneContents方法,cloneContents方法把Range对象的内容复制到一个DocumentFragment对象。

        var selectionObj = window.getSelection();

        var rangeObj = selectionObj.getRangeAt(0);

        var docFragment = rangeObj.cloneContents();

      然后将docFragment渲染出来,获取其innerHTML即可。

        var testDiv = document.createElement("div");

        testDiv.appendChild(docFragment);

        var selectHtml = testDiv.innerHTML;

      selectedHtml即为用户选中区域的html代码 

      当然一如既往的,上述的吧啦吧啦对IE是不起作用的。IE自己玩自己的。。。

      IE中,通过document.selection创建Selection对象,通过createRange方法创建Range对象,如下:

        var selectionObj = document.selection;

        var rangeObj = selectionObj.createRange();

      range对象的text属性即为用户选中区域的文本,htmlText属性即为用户选中区域的html代码。

        var selectedText = rangeObj.text;

        var selectedHtml = rangeObj.htmlText;

      OK,上面说了这么一大推,来个具体的例子吧。

      html代码如下:

         

      javascript代码为:

       var testDiv = document.getElementById("testDiv");

       testDiv.onmouseup = function(){

         var selectionObj = null, rangeObj = null, selectedText = "", selectedHtml = "";

         if(window.getSelection){

           selectionObj = window.getSelection();

           selectedText = selectionObj.toString();

           rangeObj = selectionObj.getRangeAt(0);

           var docFragment = rangeObj.cloneContents();

             var tempDiv = document.createElement("div");

           tempDiv.appendChild(docFragment);

           selectedHtml = tempDiv.innerHTML;

         }else if(document.selection){

           selectionObj = document.selection;

           rangeObj = selectionObj.createRange();

           selectedText = rangeObj.text;

           selectedHtml = rangeObj.htmlText;

         }

         alert(selectedText);

         alert(selectedHtml);

       };

       

       webkit浏览器的运行结果如下:

        

       IE浏览器的运行结果如下:

         

  • 相关阅读:
    调参过程中的参数 学习率,权重衰减,冲量(learning_rate , weight_decay , momentum)
    mxnet框架样本,使用C++接口
    faster-rcnn中ROI_POOIING层的解读
    SVM公式推导笔记
    RNN的简单的推导演算公式(BPTT)
    优化器--牛顿法总结
    评估一个预测模型性能通常都有那些指标
    nautilus出现一闪而过现象
    PIL遇到问题解决
    使用神经网络来拟合函数y = x^3 +b
  • 原文地址:https://www.cnblogs.com/ArthurPatten/p/3317263.html
Copyright © 2011-2022 走看看