Xpath tools: Difference between revisions

(6 intermediate revisions by the same user not shown)

Line 21:

</table>

== ~~chrome javascript console ==~~

== Browser Console ==

~~{{chrome}} javascript console~~

~~# 選單: 工具 -> 開發人員工具 ->~~ Console

~~# 確認符合 XPath 規則的結果，例如 XPath 規則是 {{kbd | key~~ = ~~<nowiki>"//img"</nowiki>}}，可在 Console 輸入 {{kbd | key~~ = <nowiki> $x("//img") </nowiki>}}，按 Enter。就會顯示符合 xpath 規則的結果<ref>[http://stackoverflow.com/questions/3030487/is-there-a-way-to-get-the-xpath-in-google-chrome Is there a way to get the xpath in google chrome? - Stack Overflow]</ref><ref>[https://yizeng.me/2014/03/23/evaluate-and-validate-xpath-css-selectors-in-chrome-developer-tools/ Evaluate and validate XPath/CSS selectors in Chrome Developer Tools | Yi Zeng’s Blog]</ref>：

~~https://farm4.staticflickr.com/3886/15103179455_c452b70923.jpg~~

~~image hosted~~ by ~~[https://www.flickr.com/photos/planetoid/15103179455/ flickr]~~

=== List matched elements by XPath rule ===

== ~~chrome extension~~ ==

Open the browser console in {{chrome}} or {{Edge}}:

[https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper]

# Menu: Tools → Developer Tools → Console

# To verify elements matching an XPath rule, type the expression using $x(). For example, to find all images, enter {{kbd | key = <nowiki>$x("//img")</nowiki>}} and press Enter. The matched elements will be listed in the console<ref>[http://stackoverflow.com/questions/3030487/is-there-a-way-to-get-the-xpath-in-google-chrome Is there a way to get the xpath in google chrome? - Stack Overflow]</ref><ref>[https://yizeng.me/2014/03/23/evaluate-and-validate-xpath-css-selectors-in-chrome-developer-tools/ Evaluate and validate XPath/CSS selectors in Chrome Developer Tools | Yi Zeng's Blog]</ref>:

https://planetoid.info/images/xpath_result_on_browser_console.jpg

To extract and display the text content of matched elements — cleaned and separated by newlines — use the snippet below. The example uses XPath rule {{kbd | key = <nowiki>//div[@id="showvender"]/a</nowiki>}}:

<pre>

// Use document.evaluate to retrieve all matching elements

const result = document.evaluate('//div[@id="showvender"]/a', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

// Collect text content from each element

const textArray = [];

for (let i = 0; i < result.snapshotLength; i++) {

const element = result.snapshotItem(i);

// Strip newlines and trim whitespace

const cleanedText = element.textContent.replace(/[\n\r]+/g, '').trim();

textArray.push(cleanedText);

}

// Print all results, one per line

console.log(textArray.join('\n'));

</pre>

=== List matched elements by CSS selector ===

To quickly list all elements matching a CSS selector, use {{kbd | key = <nowiki>$$("css-selector")</nowiki>}} in the console. For example, to find all images, enter {{kbd | key = <nowiki>$$("img")</nowiki>}} and press Enter. The matched elements will be listed in the console.

To extract and display the text content of matched elements — cleaned and separated by newlines — use the snippet below. The example uses CSS selector {{kbd | key = <nowiki>div#showvender a</nowiki>}}:

<pre>

// Use querySelectorAll to retrieve all matching elements

const elements = document.querySelectorAll('div#showvender a');

// Collect text content from each element

const textArray = [];

elements.forEach(el => {

// Strip newlines and trim whitespace

const cleanedText = el.textContent.replace(/[\n\r]+/g, '').trim();

textArray.push(cleanedText);

});

// Print all results, one per line

console.log(textArray.join('\n'));

</pre>

=== Highlight matched elements by XPath rule ===

By XPath rule:

<pre>

const xpath = '//main[contains(@class, "htmlview") and @data-cat="article"]';

// Helper: resolve XPath to an array of elements

function $x(xpath) {

const result = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

return Array.from({ length: result.snapshotLength }, (_, i) => result.snapshotItem(i));

}

// Scroll to the first matched element

$x(xpath)[0]?.scrollIntoView();

// Highlight all matched elements with a red outline

$x(xpath).forEach(el => {

el.style.outline = '3px solid red';

});

</pre>

=== Highlight matched elements by CSS selector ===

By CSS selector:

<pre>

const cssSelector = "main.htmlview[data-cat='article']";

// Scroll to the first matched element

document.querySelector(cssSelector)?.scrollIntoView();

// Highlight all matched elements with a red outline

document.querySelectorAll(cssSelector).forEach(el => {

el.style.outline = '3px solid red';

});

</pre>

== XPath Browser extensions ==

[https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper] for {{Chrome}}

# 不支援 {{kbd | key=<nowiki>file:///</nowiki>}}

Line 37:

Line 117:

: https://planetoid.info/images/xpath_helper.jpg

[https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh SelectorsHub]

[https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh SelectorsHub] for {{Chrome}}

# After adding it to browser, restart the browser. 安裝後，重新啟動瀏覽器

Line 45:

Line 125:

# To build your own xpath or CSS Selector, start typing in the selector input box.

[https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac/related Natu WebSync - Chrome 線上應用程式商店]

[https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac/related Natu WebSync - Chrome 線上應用程式商店] for {{Chrome}}

# 開啟「開發人員工具」

# 點選標籤「WebSync」-> 輸入 xpath 規則

[https://chrome.google.com/webstore/detail/css-selector/dobcgekgcmhjmfahepgbpmiaejlpaalc CSS Selector]

[https://chrome.google.com/webstore/detail/css-selector/dobcgekgcmhjmfahepgbpmiaejlpaalc CSS Selector][https://css-selector-gadget.dllplayer.com/welcome] for {{Chrome}}

* 直接點選網頁元素，則顯示 CSS Selector。點選 xpath 按鈕則顯示 xpath 路徑。

~~== firefox extension ==~~

[https://addons.mozilla.org/zh-TW/firefox/addon/firebug/ Firebug] + [https://addons.mozilla.org/zh-TW/firefox/addon/firepath/ FirePath] for {{Fx}}

# 選單: 工具 --> 網頁開發者 --> Firebug --> 開啟 Firebug

Line 90:

Line 169:

[[Category:Programming]]

[[Category: Programming]]

[[Category:Web_Dev]]

[[Category: Web_Dev]]

[[Category:Javascript]]

[[Category: Javascript]]

[[Category:Data collecting]]

[[Category: Data collecting]]

[[Category: Revised with LLMs]]

@@ Line 21: / Line 21: @@
 </table>
-== chrome  javascript console ==
+== Browser Console ==
-{{chrome}}  javascript console
-# 選單: 工具 -> 開發人員工具 -> Console
-# 確認符合 XPath 規則的結果，例如 XPath 規則是 {{kbd | key = <nowiki>"//img"</nowiki>}}，可在 Console 輸入 {{kbd | key = <nowiki> $x("//img") </nowiki>}}，按 Enter。就會顯示符合 xpath 規則的結果<ref>[http://stackoverflow.com/questions/3030487/is-there-a-way-to-get-the-xpath-in-google-chrome Is there a way to get the xpath in google chrome? - Stack Overflow]</ref><ref>[https://yizeng.me/2014/03/23/evaluate-and-validate-xpath-css-selectors-in-chrome-developer-tools/ Evaluate and validate XPath/CSS selectors in Chrome Developer Tools | Yi Zeng’s Blog]</ref>：
-https://farm4.staticflickr.com/3886/15103179455_c452b70923.jpg
-image hosted by [https://www.flickr.com/photos/planetoid/15103179455/ flickr]
+=== List matched elements by XPath rule ===
-== chrome extension ==
+Open the browser console in {{chrome}} or {{Edge}}:
-[https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper]
+# Menu: Tools → Developer Tools → Console
+# To verify elements matching an XPath rule, type the expression using $x(). For example, to find all images, enter {{kbd | key = <nowiki>$x("//img")</nowiki>}} and press Enter. The matched elements will be listed in the console<ref>[http://stackoverflow.com/questions/3030487/is-there-a-way-to-get-the-xpath-in-google-chrome Is there a way to get the xpath in google chrome? - Stack Overflow]</ref><ref>[https://yizeng.me/2014/03/23/evaluate-and-validate-xpath-css-selectors-in-chrome-developer-tools/ Evaluate and validate XPath/CSS selectors in Chrome Developer Tools | Yi Zeng's Blog]</ref>:
+https://planetoid.info/images/xpath_result_on_browser_console.jpg
+To extract and display the text content of matched elements — cleaned and separated by newlines — use the snippet below. The example uses XPath rule {{kbd | key = <nowiki>//div[@id="showvender"]/a</nowiki>}}:
+<pre>
+// Use document.evaluate to retrieve all matching elements
+const result = document.evaluate('//div[@id="showvender"]/a', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+// Collect text content from each element
+const textArray = [];
+for (let i = 0; i < result.snapshotLength; i++) {
+    const element = result.snapshotItem(i);
+    // Strip newlines and trim whitespace
+    const cleanedText = element.textContent.replace(/[\n\r]+/g, '').trim();
+    textArray.push(cleanedText);
+}
+// Print all results, one per line
+console.log(textArray.join('\n'));
+</pre>
+=== List matched elements by CSS selector ===
+To quickly list all elements matching a CSS selector, use {{kbd | key = <nowiki>$$("css-selector")</nowiki>}} in the console. For example, to find all images, enter {{kbd | key = <nowiki>$$("img")</nowiki>}} and press Enter. The matched elements will be listed in the console.
+To extract and display the text content of matched elements — cleaned and separated by newlines — use the snippet below. The example uses CSS selector {{kbd | key = <nowiki>div#showvender a</nowiki>}}:
+<pre>
+// Use querySelectorAll to retrieve all matching elements
+const elements = document.querySelectorAll('div#showvender a');
+// Collect text content from each element
+const textArray = [];
+elements.forEach(el => {
+    // Strip newlines and trim whitespace
+    const cleanedText = el.textContent.replace(/[\n\r]+/g, '').trim();
+    textArray.push(cleanedText);
+});
+// Print all results, one per line
+console.log(textArray.join('\n'));
+</pre>
+=== Highlight matched elements by XPath rule ===
+By XPath rule:
+<pre>
+const xpath = '//main[contains(@class, "htmlview") and @data-cat="article"]';
+// Helper: resolve XPath to an array of elements
+function $x(xpath) {
+  const result = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
+  return Array.from({ length: result.snapshotLength }, (_, i) => result.snapshotItem(i));
+}
+// Scroll to the first matched element
+$x(xpath)[0]?.scrollIntoView();
+// Highlight all matched elements with a red outline
+$x(xpath).forEach(el => {
+  el.style.outline = '3px solid red';
+});
+</pre>
+=== Highlight matched elements by CSS selector ===
+By CSS selector:
+<pre>
+const cssSelector = "main.htmlview[data-cat='article']";
+// Scroll to the first matched element
+document.querySelector(cssSelector)?.scrollIntoView();
+// Highlight all matched elements with a red outline
+document.querySelectorAll(cssSelector).forEach(el => {
+  el.style.outline = '3px solid red';
+});
+</pre>
+== XPath Browser extensions ==
+[https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl XPath Helper] for {{Chrome}}
 # 不支援 {{kbd | key=<nowiki>file:///</nowiki>}}
@@ Line 37: / Line 117: @@
 : https://planetoid.info/images/xpath_helper.jpg
-[https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh SelectorsHub]
+[https://chrome.google.com/webstore/detail/selectorshub/ndgimibanhlabgdgjcpbbndiehljcpfh SelectorsHub] for {{Chrome}}
 # After adding it to browser, restart the browser. 安裝後，重新啟動瀏覽器
@@ Line 45: / Line 125: @@
 # To build  your own xpath or CSS Selector, start typing in the selector input box.
-[https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac/related Natu WebSync - Chrome 線上應用程式商店]
+[https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac/related Natu WebSync - Chrome 線上應用程式商店] for {{Chrome}}
 # 開啟「開發人員工具」
 # 點選標籤「WebSync」-> 輸入 xpath 規則
-[https://chrome.google.com/webstore/detail/css-selector/dobcgekgcmhjmfahepgbpmiaejlpaalc CSS Selector]
+[https://chrome.google.com/webstore/detail/css-selector/dobcgekgcmhjmfahepgbpmiaejlpaalc CSS Selector][https://css-selector-gadget.dllplayer.com/welcome] for {{Chrome}}
 * 直接點選網頁元素，則顯示 CSS Selector。點選 xpath 按鈕則顯示 xpath 路徑。
-== firefox extension ==
 [https://addons.mozilla.org/zh-TW/firefox/addon/firebug/ Firebug] + [https://addons.mozilla.org/zh-TW/firefox/addon/firepath/ FirePath] for {{Fx}}
 # 選單: 工具 --> 網頁開發者 --> Firebug --> 開啟 Firebug
@@ Line 90: / Line 169: @@
 {{Template:Troubleshooting}}
-[[Category:Programming]]
+[[Category: Programming]]
-[[Category:Web_Dev]]
+[[Category: Web_Dev]]
-[[Category:Javascript]]
+[[Category: Javascript]]
-[[Category:Data collecting]]
+[[Category: Data collecting]]
+[[Category: Revised with LLMs]]