Javascript 如何突出显示给定坐标的单词

我找到了这个代码：（）：

HTML

每个单词将被包装在一个span中。
这里有第二段。
单词：

JAVASCRIPT

// wrap words in spans
$('p').each(function() {
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});


// bind to each span
$('p span').hover(
    function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
    function() { $('#word').text(''); $(this).css('background-color',''); }
);

//用跨距包装单词
$（'p'）。每个（函数（）{
var$this=$（this）；
$this.html（$this.text（）.replace（/\b（\w+）\b/g，“$1”）；
});
//绑定到每个跨度
$（'p span'）。悬停(
函数（）{$（'#word'）.text（$（this）.css（'background-color'，'#ffff66'）.text（）），
function（）{$（'#word'）.text（''）；$（this.css（'background-color'，''）；}
);

我想要类似的。我需要做的是获得相同的结果，但不是高亮显示光标下的单词（span标记），而是高亮显示给定像素坐标的单词（span标记）。 有人知道这是否可能，我如何才能做到？还是有别的办法

谢谢大家!

也许你想用。它的使用非常简单，您需要传递坐标，此函数将返回点下的元素

对于您的特殊情况，每个单词必须位于独立元素

span

、

div

或其他任何元素中

请参见工作示例：

也许您想做一些更健壮的解决方案，如果给定坐标中没有元素（

elementFromPoint（）

返回其祖先或

主体

元素，或者如果坐标不在可见部分，则为NULL），则添加一个条件。

也许您想使用。它的使用非常简单，您需要传递坐标，此函数将返回点下的元素

对于您的特殊情况，每个单词必须位于独立元素

span

、

div

或其他任何元素中

请参见工作示例：

---

也许您想做一些更健壮的解决方案，如果在给定的坐标中没有元素（

elementFromPoint（）

返回其祖先或

主体

元素，或者如果坐标不在可见部分，则为NULL）

一旦每个单词标记都包装在一个范围中，这就相对容易了。您可以使用jQuery的

.position（）

、

.width（）

和

.height（）

函数来确定元素是否与给定的x，y坐标集重叠

简单到

var x = 100, y = 100;

$("span.token").filter(function () {
    var $this = $(this), pos = $this.position();

    return y >= pos.top && y <= pos.top + $this.height() && 
        x >= pos.left && x <= pos.left + $this.width();
})

用法：

$("p").tokenize("<span class='token'>");

$（“p”）。标记化（“”）；

---

---

请看这里的一个实例：

一旦每个单词标记都包装在一个范围内，这就相对容易了。您可以使用jQuery的

.position（）

、

.width（）

和

.height（）

函数来确定元素是否与给定的x，y坐标集重叠

简单到

var x = 100, y = 100;

$("span.token").filter(function () {
    var $this = $(this), pos = $this.position();

    return y >= pos.top && y <= pos.top + $this.height() && 
        x >= pos.left && x <= pos.left + $this.width();
})

用法：

$("p").tokenize("<span class='token'>");

$（“p”）。标记化（“”）；

---

---

请参阅此处的一个实例：

我不确定是否要了解您的想法，您想突出显示什么？在哪种情况下？我有坐标，我要做的是突出显示位于给定坐标中的单词。例如，我有x和y，我想知道屏幕上位于x和y位置的单词。用例是什么？依靠

hover

事件比计算坐标更容易、更有效。我使用的是眼动跟踪器，我从数据库中获取凝视的坐标。我想突出显示用户正在查看的单词。我不确定是否会理解您的意思，您到底想突出显示什么？在哪种情况下？我有坐标，我要做的是突出显示位于给定坐标中的单词。例如，我有x和y，我想知道屏幕上位于x和y位置的单词。用例是什么？依靠

hover

事件比计算坐标更容易、更有效。我使用的是眼动跟踪器，我从数据库中获取凝视的坐标。我想要的是突出显示用户正在查看的单词。感谢您的帮助！我尝试了你的代码，我用（50，70）更改了“first”按钮的坐标，第一次按下按钮时，它会突出显示整个文本，但重置后，如果我再次按下按钮，它似乎可以工作。我不明白为什么…很简单，因为在（50,70）中没有包含文本

div

或

span

或其他内容的HTML，

elementFromPoint（）

正在返回

body

元素。因此，更改将应用于

正文中的所有元素

谢谢您的帮助！我尝试了你的代码，我用（50，70）更改了“first”按钮的坐标，第一次按下按钮时，它会突出显示整个文本，但重置后，如果我再次按下按钮，它似乎可以工作。我不明白为什么…很简单，因为在（50,70）中没有包含文本

div

或

span

或其他内容的HTML，

elementFromPoint（）

正在返回

body

元素。因此，更改将应用于

正文中的所有元素

非常感谢！！它看起来是我的项目的完美解决方案！我会尝试调整它，以适应我的程序，我会让你知道，如果它的工作！！再次感谢你！！非常感谢你！！它看起来是我的项目的完美解决方案！我会尝试调整它，以适应我的程序，我会让你知道，如果它的工作！！再次感谢你！！