如何使用用户脚本按类名从（动态）div中提取文本？ [英] appendedHow do I extract the text from a (dynamic) div, by class name, using a userscript?

问题描述

如何使用JavaScript从以下对象中提取值2083236893？

 < div class =gwt-Label > 2083236893< / DIV> 
  

我为Firefox 52.2.1（32位）安装了Greasemonkey 3.17并测试了所提供的每个代码示例失败。

  var html = document.getElementsByClassName（gwt-Label）[0]; 
 alert（html.innerHTML）; 
  

以上示例来自： 按类名访问Div，使用javascript 。

代码是否应该在完全下载网页的情况下运行？

附加：

  var elements = document.getElementsByClassName（gwt-Label）[0]; 
 alert（elements.innerHTML）; 
  

如果

<$ p $，上述情况可能会失败p> elements.length = 0


文件可能属于这种情况未完整加载或查询结果= 0 - 没有DIV对象包含来自查询字符串的类名

Firebug可以生成XPath到所选对象（innerHTML或innerTEXT）文档（浏览器中的HTML版本），用于验证查询中的类名是否正确且存在。

设置更大的超时值可能会使HTML文档成为完全加载以使您的脚本通过Greasemonkey或类似的附加组件运行，以通过

  console.log（HTMLCollection.length）提供正确的结果）
  

见上文。

解决HTML中的方案

class =gwt-Label强烈暗示页面是由 Google Web Toolkit - 这意味着页面是AJAX驱动的，静态技术，如在其他一些答案中，将无法工作。

使用AJAX感知技术，如 waitForKeyElements（）。这是一个完整脚本，它将 gwt-Label 值打印到浏览器控制台。 （ Ctrl Shift I 打开控制台。）：

  // == UserScript == 
 // @name _Print gwt-Label text 
 // @match *：//YOUR_SERVER.COM/YOUR_PATH/* 
 // @match https://stacksnippets.net/js* 
 // @require https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js 
 / / @require https://gist.github.com/raw/2625891/waitForKeyElements.js 
 // @grant GM_addStyle 
 // == / UserScript == 
 //  -  @需要grant指令来恢复正确的沙箱。 
 
 waitForKeyElements（。gwt-Label，printNodeText）; 
 
函数printNodeText（jNode）{
 console.log（gwt-Label value：，jNode.text（）。terim（））; 
} 
  

如果有多个标签，这将打印每个标签。

请注意，waitForKeyElements需要jQuery选择器。

---

---

您可以通过使用Greasemonkey，Tampermonkey，Violentmonkey等安装上述脚本来测试，然后运行此代码段：

  var lblbNum = 0; function addLableLine（）{lblbNum ++; $（body）。append（`< div class =gwt-Label>新标签：$ {lblbNum}< / div>`）;} setInterval（addLableLine，1333）; //每1.3秒换行一次。 

  .gwt-Label {display：inline-block;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =gwt-Label> 2083236893< / div>  

然后你会看到：

 
 gwt-标签价值：2083236893 
 gwt-标签值：新标签：1 
 gwt-标签值：新标签：2 $ b浏览器控制台中的$ b等... 
 

。

How do I extract the value 2083236893 from the following object using JavaScript?

<div class="gwt-Label">2083236893</div>

I installed Greasemonkey 3.17 for Firefox 52.2.1 (32-bit) and tested every code example provided and failed.

var html = document.getElementsByClassName("gwt-Label")[0];
alert(html.innerHTML);

The above example comes from: Accessing Div, by class name, with javascript.

Should the code be run on full download of the web page?

Appended:

var elements = document.getElementsByClassName("gwt-Label")[0];
alert(elements.innerHTML);

the above may fail if

elements.length = 0

It may be the case the document has not been loaded in full or query result = 0 - no DIV object contains class name from query string

Firebug can generate XPath to the selected object (innerHTML or innerTEXT) in the document (HTML version in your browser) to let you verify if the class name from the query is correct and exists.

Setting greater value for timeout may let HTML document to be loaded fully to make your script run via Greasemonkey or alike add-on to give correct results via

console.log(HTMLCollection.length) 

see above.

解决方案

class="gwt-Label" in the HTML, strongly implies that the page is driven by Google Web Toolkit -- which means the page is AJAX driven and static techniques, like in some other answers, will not work.

Use AJAX aware techniques, like waitForKeyElements(). Here's a complete script that will print gwt-Label values to the browser console. (Ctrl Shift I opens said console.) :

// ==UserScript==
// @name     _Print gwt-Label text
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @match    https://stacksnippets.net/js*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

waitForKeyElements (".gwt-Label", printNodeText);

function printNodeText (jNode) {
    console.log ("gwt-Label value: ", jNode.text ().trim () );
}

This will print each label, if there is more than one.

Note that waitForKeyElements takes jQuery selectors.

---

---

You can test the above script by installing it using Greasemonkey, Tampermonkey, Violentmonkey, or similar, then running this snippet:

var lblbNum = 0;
function addLableLine () {
    lblbNum++;
    $("body").append(`<div class="gwt-Label">New label: ${lblbNum}</div>`);
}
setInterval (addLableLine, 1333);  // New line every 1.3 seconds.

.gwt-Label {display: inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gwt-Label">2083236893</div>

You will then see:

gwt-Label value:  2083236893
gwt-Label value:  New label: 1
gwt-Label value:  New label: 2
etc...

in the browser console.

这篇关于如何使用用户脚本按类名从（动态）div中提取文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！