使用 tampermonkey 在按键上提取跨度值

Question

（我主要使用 Matlab，但我需要来自网页的一些输入数据才能使其成为运行。我对 Javascript 和任何形式的 Grease/Tampermonkey 完全陌生.)

我的意图是每次在网页上按下一个键按钮时得到四个特定的跨度值。我想将这些值堆叠在一个数组中，稍后将它们导出到 csv 中。

鼠标悬停在页面上时跨度值会发生变化。理想情况下，我将光标移动到我需要获取的数据，按下一个键并保存数据。

我无法让这些工作。使用此函数调用数据，因为有 4 个值具有相同的类名，我打算循环遍历索引以获取所有值。

function readvalue(index){

    let text = document.getElementsByClassName("pane-legend-item-value")[index].innerhtml;

}

也许像这样调用 kreypress？

if (event.key === "Enter") {
    event.preventDefault();

    let v1 = readvalue(0);
    let v2 = readvalue(1);
    let v3 = readvalue(2);
    let v4 = readvalue(3);
    console.log(v1);
}

我很想在这里得到一些帮助！如果您有空闲时间帮助我，请随时通过电子邮件给我发消息。 (rage271@gmx.de)

感谢您阅读本文。

干杯，马尔特

Answer 1

存储解决方案

一种解决方案是在鼠标悬停事件上存储值，并在您按下回车键时打印存储的值。

我认为这个解决方案在更大的网页上获得正确的值有点棘手。

let valueStore = '';

document.querySelectorAll('.pane-legend-item-value').forEach(function(elem) {
    elem.addEventListener("mouseleave", function(event) {
        valueStore = '';
        elem.style.backgroundColor = '#ffffff';
    });
    
    elem.addEventListener("mouseover", function(event) {
        valueStore = event.target.innerHTML;
        elem.style.backgroundColor = '#ff0000';
    });
});

document.addEventListener('keyup', function() {
    if (event.key === "Enter") {
        console.log(valueStore);
    }
});

<div class="pane-legend-item-value">value 1</div>
<div class="pane-legend-item-value">value 2</div>
<div class="pane-legend-item-value">value 3</div>
<div class="pane-legend-item-value">value 4</div>

定位解

另一种解决方案是存储鼠标位置并使用elementFromPoint方法获取元素。但是当两个元素相互重叠时会发生什么？

let x;
let y;

document.onmousemove = function(event){
    event = event || window.event;
    x = event.clientX;
    y = event.clientY;
};

function getElementAtMousePosition() {
    return document.elementFromPoint(x,y);
}

document.addEventListener('keyup', function() {
    if (event.key === "Enter") {
        console.log(getElementAtMousePosition().innerHTML);
    }
});

<div class="pane-legend-item-value">value 1</div>
    <div class="pane-legend-item-value">value 2</div>
    <div class="pane-legend-item-value">value 3</div>
    <div class="pane-legend-item-value">value 4</div>

Answer 2

使用 jQuery's .map() function 轻松提取值（并且 jQuery 使用户脚本更容易，并在通过 @require 使用时在本地加载）。

请注意，对于键盘事件处理程序：

您通常应该阻止默认操作以防止意外的副作用。
keyup 尤其是 keypress 在某些情况下可以被抑制。通常在这种情况下最好使用keydown。

所以，这里是一个完整的工作用户脚本（它只是******块上方的部分）。
要查看实际效果，运行代码段。

// ==UserScript==
// @name     _Grab span values on keypress
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.
/* global $ */

$(window).keydown (keyboardShortcutHandler);

function keyboardShortcutHandler (zEvent) {
    if (zEvent.key == "Enter") {
        grabStatsFromSpans ();

        zEvent.preventDefault ();
        zEvent.stopPropagation ();
        return false;
    }
}
function grabStatsFromSpans () {
    var zStats = $(".pane-legend-item-value").map (
        (K, node) => node.textContent.trim ()
    ).get ();
    console.log ("zStats: ", zStats);
}

/********************************************************************
******* Everything below this block is simulated target page. *******
******* It's NOT part of the userscript.                      *******
********************************************************************/
$("table").on ("mouseover", "td", zEvent => {
    var jSqr    = $(zEvent.target);
    var stats   = jSqr.data ("stats");
    $(".pane-legend-item-value:eq(0)").text (jSqr.text() );
    $(".pane-legend-item-value:eq(1)").text (stats[0]);
    $(".pane-legend-item-value:eq(2)").text (stats[1] === "m" ? "male" : "female");
    $(".pane-legend-item-value:eq(3)").text (stats[2].toLocaleString('en') );
} );

table {border-spacing: 1em; margin: -1em;}
td {border: 1px solid gray; padding: 1em 2em;}
h3 {margin-bottom: 0;}
label {margin-left: 3em; width: 5em; display: inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p><strong>Click in this area.</strong> Then, Mouse over squares and press enter.</p>
<table><tr>
    <td data-stats='["human","m",1.1e3]'>Aksel</td>
    <td data-stats='["cat","f",7.3e7]'>Babette</td>
    <td data-stats='["dog","f",9.6e6]'>Cajsa</td>
</tr></table>
<h3>Stats:</h3>
<label>Name:    </label><span class="pane-legend-item-value"></span><br>
<label>Species: </label><span class="pane-legend-item-value"></span><br>
<label>Gender:  </label><span class="pane-legend-item-value"></span><br>
<label>Likes:   </label><span class="pane-legend-item-value"></span>

使用 tampermonkey 在按键上提取跨度值

Extracting span values on keypress with tampermonkey

html

javascript

keypress

web-scraping

tampermonkey