使用javascript和jquery获取网页中选定文本的上下文

我想要获取网页中选定文本的上下文，这意味着我想要获取选定文本周围（前后）的周围25个字我使用的JavaScript和jQuery通过使用下面的代码来获得，但它不工作我的代码是：使用javascript和jquery获取网页中选定文本的上下文

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>jQuery UI Example Page</title> 
     <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" /> 
     <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script> 

     <style type="text/css"> 
      /*demo page css*/ 
      body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} 
      .demoHeaders { margin-top: 2em; } 
      #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} 
      #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} 
      ul#icons {margin: 0; padding: 0;} 
      ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} 
      ul#icons span.ui-icon {float: left; margin: 0 4px;} 
     </style>  

     <script type="text/javascript"> 

      $(document).ready(function() { 
       $("body :not(:button, img, script, img)").mouseup(function(e) { 
        var allText = $(this).text(); 
        //alert("All existing text = "+allText);    
        document.getElementById("allText").innerHTML = allText; 

        var selText = window.getSelection(); 

        var selectedRange = selText.rangeCount ? selText.getRangeAt(0) : null;  

        var pinPoint = selectedRange.startOffset; 

        //alert("Index of selected word = "+pinPoint); 
        document.getElementById("index").innerHTML = pinPoint; 
        document.getElementById("selectedText").innerHTML = selText; 

        var textBefore = ""; 
        var textAfter = ""; 
        var spacesCounter = 0; 
        var startIndex = pinPoint; 
        while(spacesCounter < 25 && startIndex >= 0) 
        { 
         startIndex--; 
         if(allText.charAt(startIndex) == " ") 
         {     
          //if char = space 
          spacesCounter++;     
         } 
         textBefore = allText.charAt(startIndex)+ "" + textBefore; 
        } 
        //alert("Text before: "+textBefore); 
        document.getElementById("beforeText").innerHTML = textBefore; 
        //Get text after 
        spacesCounter = 0; 
        startIndex = pinPoint + selText.toString().length; 
        while(spacesCounter < 25 && startIndex < allText.length) 
        { 
         startIndex++; 
         if(allText.charAt(startIndex) == " ") 
         { 
          //if char = space 
          spacesCounter++; 
         } 
         textAfter = textAfter + allText.charAt(startIndex); 
        } 
        //alert("Text after: "+textAfter); 
        document.getElementById("afterText").innerHTML = textAfter; 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <h1>Helpera</h1> 

     <!-- ui-dialog --> 
     <h1>Index of selection</h1> 
     <p id="index"></p> 
     <h1>All text</h1> 
     <p id="allText"></p> 
     <h1>Selected text</h1> 
     <p id="selectedText"></p> 
     <h1>Text before</h1> 
     <p id="beforeText"></p> 
     <h1>Text after</h1> 
     <p id="afterText"></p> 


     <div id="mw-content-text" lang="en" dir="ltr" class="mw-content-ltr"><div class="dablink">For the histograms used in digital image processing, see <a href="/wiki/Image_histogram" title="Image histogram">Image histogram</a> and <a href="/wiki/Color_histogram" title="Color histogram">Color histogram</a>.</div> 
      <table class="infobox" cellspacing="5" style="width:22em;"> 
       <tr> 
        <th colspan="2" class="" style="text-align:center; font-size:125%; font-weight:bold; background:LightPink;">Histogram</th> 
       </tr> 
       <tr class=""> 
        <td colspan="2" class="" style="text-align:center;"><a href="/wiki/File:Histogram_of_arrivals_per_minute.svg" class="image"><img alt="Histogram of arrivals per minute.svg" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Histogram_of_arrivals_per_minute.svg/250px-Histogram_of_arrivals_per_minute.svg.png" width="250" height="212" /></a></td> 
       </tr> 
       <tr> 
        <th colspan="2" class="" style="text-align:center; background:LightPink;font-size:110%;">One of the <b><a href="/wiki/Seven_Basic_Tools_of_Quality" title="Seven Basic Tools of Quality">Seven Basic Tools of Quality</a></b></th> 
       </tr> 
       <tr class=""> 
        <th scope="row" style="text-align:left;">First described by</th> 
        <td class="" style=""><a href="/wiki/Karl_Pearson" title="Karl Pearson">Karl Pearson</a></td> 
       </tr> 
       <tr class=""> 
        <th scope="row" style="text-align:left;">Purpose</th> 
        <td class="" style="">To roughly assess the <a href="/wiki/Probability_distribution" title="Probability distribution">probability distribution</a> of a given variable by depicting the frequencies of observations occurring in certain ranges of values</td> 
       </tr> 
      </table> 
      <p>In <a href="/wiki/Statistics" title="Statistics">statistics</a>, a <b>histogram</b> is a graphical representation showing a visual impression of the distribution of data. It is an estimate of the <a href="/wiki/Probability_distribution" title="Probability distribution">probability distribution</a> of a continuous variable and was first introduced by <a href="/wiki/Karl_Pearson" title="Karl Pearson">Karl Pearson</a>.<sup id="cite_ref-pearson_0-0" class="reference"><a href="#cite_note-pearson-0"><span>[</span>1<span>]</span></a></sup> A histogram consists of tabular <a href="/wiki/Frequency_(statistics)" title="Frequency (statistics)">frequencies</a>, shown as adjacent <a href="/wiki/Rectangle" title="Rectangle">rectangles</a>, erected over discrete intervals (bins), with an area equal to the frequency of the observations in the interval. The height of a rectangle is also equal to the frequency density of the interval, i.e., the frequency divided by the width of the interval. The total area of the histogram is equal to the number of data. A histogram may also be <a href="/wiki/Normalization_(statistics)" title="Normalization (statistics)">normalized</a> displaying relative frequencies. It then shows the proportion of cases that fall into each of several <a href="/wiki/Categorization" title="Categorization">categories</a>, with the total area equaling 1. The categories are usually specified as consecutive, non-overlapping <a href="/wiki/Interval_(mathematics)" title="Interval (mathematics)">intervals</a> of a variable. The categories (intervals) must be adjacent, and often are chosen to be of the same size.<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span>[</span>2<span>]</span></a></sup> The rectangles of a histogram are drawn so that they touch each other to indicate that the original variable is continuous. <sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span>[</span>3<span>]</span></a></sup></p> 
      <p>Histograms are used to plot density of data, and often for <a href="/wiki/Density_estimation" title="Density estimation">density estimation</a>: estimating the <a href="/wiki/Probability_density_function" title="Probability density function">probability density function</a> of the underlying variable. The total area of a histogram used for probability density is always normalized to 1. If the length of the intervals on the <i>x</i>-axis are all 1, then a histogram is identical to a <a href="/wiki/Relative_frequency" title="Relative frequency" class="mw-redirect">relative frequency</a> plot.</p> 
      <p>An alternative to the histogram is <a href="/wiki/Kernel_density_estimation" title="Kernel density estimation">kernel density estimation</a>, which uses a <a href="/wiki/Kernel_(statistics)" title="Kernel (statistics)">kernel</a> to smooth samples. This will construct a <a href="/wiki/Smooth_function" title="Smooth function">smooth</a> probability density function, which will in general more accurately reflect the underlying variable.</p> 
      <p>The histogram is one of the <a href="/wiki/Seven_Basic_Tools_of_Quality" title="Seven Basic Tools of Quality">seven basic tools</a> of <a href="/wiki/Quality_control" title="Quality control">quality control</a>.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span>[</span>4<span>]</span></a></sup></p> 
      <table id="toc" class="toc"> 
       <tr> 
        <td> 
         <div id="toctitle"> 
          <h2>Contents</h2> 
         </div> 
         <ul> 
          <li class="toclevel-1 tocsection-1"><a href="#Etymology"><span class="tocnumber">1</span> <span class="toctext">Etymology</span></a></li> 
          <li class="toclevel-1 tocsection-2"><a href="#Examples"><span class="tocnumber">2</span> <span class="toctext">Examples</span></a> 
           <ul> 
            <li class="toclevel-2 tocsection-3"><a href="#Shape_or_form_of_a_distribution"><span class="tocnumber">2.1</span> <span class="toctext">Shape or form of a distribution</span></a></li> 
           </ul> 
          </li> 
          <li class="toclevel-1 tocsection-4"><a href="#Activities_and_demonstrations"><span class="tocnumber">3</span> <span class="toctext">Activities and demonstrations</span></a></li> 
          <li class="toclevel-1 tocsection-5"><a href="#Mathematical_definition"><span class="tocnumber">4</span> <span class="toctext">Mathematical definition</span></a> 
           <ul> 
            <li class="toclevel-2 tocsection-6"><a href="#Cumulative_histogram"><span class="tocnumber">4.1</span> <span class="toctext">Cumulative histogram</span></a></li> 
            <li class="toclevel-2 tocsection-7"><a href="#Number_of_bins_and_width"><span class="tocnumber">4.2</span> <span class="toctext">Number of bins and width</span></a></li> 
           </ul> 
          </li> 
         </ul> 
        </td></tr></table></div> 
     <br /><br /> 

    </body> 
</html>

来源

2012-06-17 naruto

比**这是行不通的一个更好的解释任何机会**？ – charlietfl

@charlietfl：你需要添加JQuery库http://jquery.com/ – naruto

你可以跟我Rangy library的新TextRange module做到这一点。 Rangy的Range对象有和moveEnd()方法，它们允许您在任一方向上一次扩展一个单词的范围。

下面是一个例子。现场演示：http://jsfiddle.net/timdown/3p5tH/

代码：

$(document).ready(function() { 
    $("body :not(:button, img, script, img)").mouseup(function(e) { 
     var sel = rangy.getSelection(); 
     if (sel.rangeCount > 0) { 
      var range = sel.getRangeAt(0); 

      // Expand the range to contain the whole word 
      range.expand("word"); 

      // Get the 25 words preceding the selection 
      var wordRange = range.cloneRange(); 
      wordRange.collapse(true); 
      wordRange.moveStart("word", -25); 
      document.getElementById("beforeText").innerHTML = wordRange.text(); 

      // Get the 25 words following the selection 
      wordRange.collapseToPoint(range.endContainer, range.endOffset); 
      wordRange.moveEnd("word", 25); 
      document.getElementById("afterText").innerHTML = wordRange.text(); 
      wordRange.detach(); 
     } 
    } 
});

来源

2012-06-17 23:50:17

你能给我一个例子来帮助我使用你的库提前感谢 – naruto

@naruto：增加了一个例子。 –

我发现了以下错误“Uncaught TypeError：Object distribution has no method'expand'” – naruto

使用javascript和jquery获取网页中选定文本的上下文

回答

相关问题