如何在给定坐标的情况下突出显示单词

how to highlight a word given coordinates

本文关键字：情况下 显示 单词 坐标      更新时间：2023-09-26

我发现了以下代码：（脚本的结果）：

HTML

<p>Each word will be wrapped in a span.</p><p>A second paragraph here.</p>Word: <span id="word"></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',''); }
);

我想要类似的东西。我需要做的是获得相同的结果，但我需要在给定像素坐标的情况下高亮显示单词（span标签），而不是高亮显示光标下的单词（span标记）。有人知道这是否可能吗？我该怎么做？或者还有别的办法吗？

谢谢！

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

对于您的特定情况，每个单词都必须位于独立元素span、div或其他元素中。

参见工作示例：jsfiddle

也许你想制定一些更健壮的解决方案，如果在给定的坐标中没有元素（elementFromPoint()返回其祖先或body元素，或者如果坐标不在可见部分则返回NULL），则添加一个条件

一旦每个单词标记都封装在一个span中，这就相对容易了。您可以使用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();
})

在位置100100处查找元素。

然而。您的"将单词包裹在跨度中"函数是错误的，并且具有潜在的危险性。必须将其改写为一种更复杂但作为交换更安全的方法。

我创建了一个.tokenize()jQuery插件，它遍历DOM树并替换它找到的所有文本节点，将它们封装在一个可配置的HTML:中

$.fn.extend({
    // this function recursively tokenizes all text nodes in an element
    tokenize: function (wrapIn) {
        return this.not(".tokenized").each(function () {
            $(this).addClass("tokenized").children().tokenize(wrapIn);
            $(this).contents().each(function () {
                var node = this,
                    parent = this.parentNode,
                    tokens, tokenCount;
                // text node: tokenize, dissolve into elements, remove original text node
                if (node.nodeType === 3) {
                    tokens = $(node).text().replace(/'s+/g, " ").split(" ");
                    tokenCount = tokens.length;
                    $.each(tokens, function (i, token) {
                        if (token > "") {
                            parent.insertBefore($(wrapIn).text(token)[0], node);
                        }
                        if (i < tokenCount - 1) {
                            parent.insertBefore(document.createTextNode(" "), node);
                        }
                    });
                    parent.removeChild(node);
                }
            });
        });
    }
});

用法：

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

请在此处查看实际示例：http://jsfiddle.net/u5Lx6e2a/

相关文章：