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

Getting the style of the word surrounding the current cursor position

本文关键字：单词 样式 周围 位置 光标 获取      更新时间：2023-09-26

我正在尝试在当前光标位置下获取单词的样式/粗体，斜体等。我有点击的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();

但我对此不是很满意。有没有更好的方法来实现这一目标？

我认为如果不编写大量代码，你无法比你所拥有的做得更好。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);
}
相关文章：