0
我想要獲取網頁中選定文本的上下文，這意味着我想要獲取選定文本週圍（前後）的周圍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>
比**這是行不通的一個更好的解釋任何機會**？ – charlietfl
@charlietfl：你需要添加JQuery庫http://jquery.com/ – naruto