光标全选单词

去圣西罗-为尤文喝彩 2011-09-22 05:29:12

最近在研究学习 window.getSelection 。
想做一个效果，鼠标选择任意词组的某一单词后，光标会自动全选整个单词。
我使用 range.toString() 函数（这个只能在非IE浏览器里工作，有点遗憾）然后match 单词前后的空格或者HTML TAG，来判断是否为一个完整的单词。使用 match(/\w/)//匹配空格，可以正常运行，但是使用 match(/<[^>]+>/g) 引起 "Uncaught SyntaxError: Unexpected token <" 错误，不能正常工作，请大家帮忙看看，问题在哪里？

解释一下： <div id="content-area">aaa bbb ccc ddd eee fff ggg</div>
bbb,前后都是空格，所有可以判断bbb是一个完整的单词。aaa前面是一个HTML TAG，后面是一个空格，所有我尝试match(/<[^>]+>/g)。 ggg 前面是空格，后面是HTML TAG，所有我尝试 .match(/(<\/[^>]+>)/g。

另外，除了 range.toString()，是否还有更好的方法，实现光标自动全选整个单词的效果？

<script src="jquery.js"></script>

<script>

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;

}

function expand(range) { //根据空格和HTML TAG，判断是否一个完整的单词。

    if (range.collapsed) {

        return;

    }

    while (range.toString()[0].match(/\w/)||range.toString()[0].match(/<[^>]+>/g)) {

        range.setStart(range.startContainer, range.startOffset - 1);   

    }

    while (range.toString()[range.toString().length - 1].match(/\w/)||range.toString()[range.toString().length - 1].match(/(<\/[^>]+>)/g)) {

        range.setEnd(range.endContainer, range.endOffset + 1);

    }

}



jQuery(document).ready(function() { //jQuery mouseup执行鼠标选择文字。

  $('#content-area').mouseup(function() {

	var selectionRange = getSelected().getRangeAt(0);

    var start = selectionRange.startOffset; 

    expand(selectionRange);

    var selection = selectionRange.toString();

    if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {

        $('#show-text').html(selection)

    }

  });

});

</script>

<div id="content-area">aaa bbb ccc ddd eee fff ggg</div>

<div id="show-text"></div>