使用getSelection选择整个单词 [英] Select whole word with getSelection
问题描述
我想使用 getSelection
函数从文章中选择单词到视图框。
I want use the getSelection
function to select words from articles to a view box.
这是我的代码: http://jsfiddle.net/xQKNh/2/ 。
现在我想问一下,如何使用JavaScript来选择整个单词?
Now I want to ask, how to use JavaScript to select the whole word?
如需说明,
Is your question about programming?
在我的代码中,如果我选择 r关于pro的问题
,查看框
将显示
In my code, if I choose r question about pro
, the view box
will show
r question about pro
但如何完成单词?因此它输出:
But how to make the words completed? So that it outputs:
your question about programming.
Javascript代码:
Javascript code:
function getSelected() {
if(window.getSelection) { return window.getSelection(); }
else if(document.getSelection) { return document.getSelection(); }
else {
var selection = document.selection && document.selection.createRange();
if(selection.text) { return selection.text; }
return false;
}
return false;
}
$(document).ready(function() {
$('#content-area').mouseup(function() {
var selection = getSelected();
if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
$('#show-text').html(selection)
}
});
});
推荐答案
最新版本的Firefox和WebKit浏览器都内置了在 modify()
(另请参见工作进展规范)方法执行此操作的选择
对象。从版本4开始,IE有一种完全不同的方法。在任何一种情况下,这种方法都具有跨元素边界工作的显着优势。
Recent versions of Firefox and WebKit browsers have a built-in modify()
(see also work-in-progress spec) method of the Selection
object to do this. IE has had a completely different way to do this since version 4. In either case, this method has the significant advantage of working across element boundaries.
以下示例适用于IE 4 +,Firefox 4+以及Safari和Chrome在过去几年中发布的版本。 Opera目前还不支持选择
对象的 modify()
方法。
The following example works in IE 4+, Firefox 4+ and Safari and Chrome in versions released in the last couple of years. Opera as yet has no support for the modify()
method of Selection
objects.
2011年10月20日更新
我现在已经(实际上)重写了这一点(它没有正如在评论中指出的那样,之前在非IE浏览器中正常工作。不幸的是,选择扩展在非IE中过于贪婪,并且如果已经选择了整个单词,则将选择扩展到下一个单词,但我现在看不到一个简单的方法。
I've rewritten this to actually (mostly) work now (it didn't work properly in non-IE browsers before, as pointed out in the comments). Unfortunately, the selection expansion is too greedy in non-IE and expands the selection to the next word if a whole word is already selected, but I can't see an easy way round this at the moment.
更新2012年6月11日
我现在更新了这个相关问题的答案。感谢Matt M和Fong-Wan Chau。
I've now updated this with an improvement from this answer to a related question. Thanks to Matt M and Fong-Wan Chau for this.
现场演示: http://jsfiddle.net/rrvw4/23/
代码:
function snapSelectionToWord() {
var sel;
// Check for existence of window.getSelection() and that it has a
// modify() method. IE 9 has both selection APIs but no modify() method.
if (window.getSelection && (sel = window.getSelection()).modify) {
sel = window.getSelection();
if (!sel.isCollapsed) {
// Detect if selection is backwards
var range = document.createRange();
range.setStart(sel.anchorNode, sel.anchorOffset);
range.setEnd(sel.focusNode, sel.focusOffset);
var backwards = range.collapsed;
range.detach();
// modify() works on the focus of the selection
var endNode = sel.focusNode, endOffset = sel.focusOffset;
sel.collapse(sel.anchorNode, sel.anchorOffset);
var direction = [];
if (backwards) {
direction = ['backward', 'forward'];
} else {
direction = ['forward', 'backward'];
}
sel.modify("move", direction[0], "character");
sel.modify("move", direction[1], "word");
sel.extend(endNode, endOffset);
sel.modify("extend", direction[1], "character");
sel.modify("extend", direction[0], "word");
}
} else if ( (sel = document.selection) && sel.type != "Control") {
var textRange = sel.createRange();
if (textRange.text) {
textRange.expand("word");
// Move the end back to not include the word's trailing space(s),
// if necessary
while (/\s$/.test(textRange.text)) {
textRange.moveEnd("character", -1);
}
textRange.select();
}
}
}
这篇关于使用getSelection选择整个单词的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!