我想在网页中获取所选文本的上下文，这意味着我希望获得所选文本周围（前后）的25个单词 我使用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>
答案 0 :(得分：0)
您可以使用TextRange module的新Rangy library执行此操作。 Rangy的Range对象具有moveStart()和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();
}
}
});