获取当前光标位置周围单词的样式答案

【问题标题】：Getting the style of the word surrounding the current cursor position获取当前光标位置周围单词的样式
【发布时间】：2012-05-17 01:30:33
【问题描述】：

我正在尝试获取当前光标位置下单词的样式/粗体、斜体等/。我有点击的x 和y 坐标，我已经完成了以下操作

var range = document.caretRangeFromPoint(x, y);
range.expand('word');
range.queryCommandState('bold');

但这会导致范围没有queryCommandState 方法的错误，而此读数：http://help.dottoro.com/ljkxwclp.php 暗示范围或至少是文本范围（我是 JS 新手，请原谅我）有这样的方法。非常感谢任何帮助。

编辑：我通过添加来解决这个问题

var range = document.caretRangeFromPoint(x,y);
range.expand('word');
window.getSelection().addRange(range);
document.queryCommandState('bold');
window.getSelection().empty();

但我对此不太满意。有没有更好的方法来实现这一点？

【问题讨论】：

如果您按照该页面上的示例，他们使用document.queryCommandState("bold");。你试过吗？
是的。但这只有在我们有选择的情况下才有效，而当用户只是移动光标时没有任何选择。
您需要支持哪些浏览器？
android natve 浏览器 - 它运行 webkit 作为布局渲染引擎。

标签： javascript word selection range styling

【解决方案1】：

如果不编写大量代码，我认为没有比现有的更好的了。 IE 专有的TextRange 有一个queryCommandState() 和相关方法，但在其他浏览器中从未进入 Range。

如果您不满意需要销毁选择来进行粗体测试，那么我同意这似乎不必要地复杂和笨重，但是将选择恢复到其原始状态很简单。此外，清空选择的基于标准的方法是removeAllRanges()，而不是empty()，这是WebKit 特有的。

演示：http://jsfiddle.net/GkWTb/1/

代码：

var range = document.caretRangeFromPoint(x, y);
var sel = window.getSelection();
var selRange;

// Save initial selection
if (sel.rangeCount > 0) {
    selRange = sel.getRangeAt(0);
}
range.expand("word");
sel.removeAllRanges();
sel.addRange(range);
alert( document.queryCommandState("bold") );

// Restore original selection
sel.removeAllRanges();
if (selRange) {
    selRange = sel.addRange(selRange);
}

【讨论】：