如何突出給出一個字座標

我發現這個代碼：（result of the script）：如何突出給出一個字座標

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標籤）。有誰知道這是否可能，我該怎麼做？還是有另一種方式？

謝謝！

來源

2014-08-27 Shazije Mustabelli

我不知道跟着你，世界衛生大會你想要精確地突出顯示嗎？在哪種情況下？ – aymericbeaumet 2014-08-27 14:37:47

我有座標，我想要做的是突出位於給定座標的單詞。例如，我有x和y，我想知道位於屏幕上x和y位置的單詞。 – 2014-08-27 14:51:46

用例是什麼？依靠「懸停」事件而不是計算座標會更容易，更高效。 – aymericbeaumet 2014-08-27 15:02:26

也許你想使用elementFromPoint()。使用起來非常簡單，您需要傳遞座標，並且此函數將返回該點下的一個元素。

對於您的特殊情況，每個單詞必須在獨立元素span,div或其他。

見工作實例：jsfiddle

也許你要做出一些更強大的解決方案，並在給定的座標添加一個條件沒有一個元素（elementFromPoint()返回其祖先或body元素或NULL，如果座標不在可見部分）

來源

2014-08-27 15:54:25 rogelio

謝謝你的幫助！我嘗試了你的代碼，並用（50,70）改變了「第一個」按鈕的座標，並且第一次按下按鈕時，它突出顯示了整個文本，但重新設置後，如果再次按下按鈕，似乎可以工作。我不明白爲什麼...... – 2014-08-29 09:30:17

簡單，因爲在（50,70）中沒有帶有文本'div'或'span'或其他的HTML的HTML，'elementFromPoint（）'返回'body'元素。因此，更改將適用於'body'內的所有元素。 – rogelio 2014-08-29 14:23:28

這是比較容易，一旦每一個字令牌被包裹在一個跨度。您可以使用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/

來源

2014-08-27 16:40:25 Tomalak

非常感謝！它看起來像我的項目的完美解決方案！我會嘗試將其應用於我的程序，並且如果它能正常工作，我會讓你知道！再次感謝你！！ – 2014-08-29 09:37:50

如何突出給出一個字座標

回答

相關問題