xpath-selector

一个 XPath 选择器库,快速获取节点数据

Este script no debería instalarse directamente. Es una biblioteca que utilizan otros scripts mediante la meta-directiva de inclusión // @require https://update.greasyfork.org/scripts/559142/1716496/xpath-selector.js

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

You will need to install an extension such as Tampermonkey to install this script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

Autor
xiaohuohumax
Versión
1.1.2
Creado
16/12/2025
Actualizado
18/12/2025
Tamaño
479 KB
Licencia
MIT

XPath Selector

一个 XPath 选择器库,快速获取节点数据

项目地址 开源协议 更新日志 问题反馈

📥 参数说明

通用函数 xpathSelector(options: Options)

Options 参数说明:

参数名 类型 是否必填 默认值 说明
expression string 要获取的节点的 XPath 表达式
returnType string 获取结果的类型,可选值:stringstringsnumbernumbersbooleannodesfirst-nodemaparrayall-results
node Node document 要搜索的节点
const title = xpathSelector({
  expression: '//title/text()',
  returnType: 'string'
})
console.log(title) // hello world

快捷函数 xpathSelector.selectreturnType

Options 参数说明:

参数名 类型 是否必填 默认值 说明
returnType string 函数名,可选值见上方 Options.returnType 参数说明
expression string 要获取的节点的 XPath 表达式
node Node document 要搜索的节点
const title = xpathSelector.selectString('//title/text()')
console.log(title) // hello world

📖 使用方式

方式一:直接引入库文件

// ==UserScript==
// @require      https://**/xpath-selector.js?*
// ==/UserScript==

(function () {
  'use strict'
  const title = xpathSelector.selectString('//title/text()')
  console.log(title) // hello world
})()

方式二:vite + vite-plugin-monkey [推荐]

  1. 初始化项目
npm create monkey
  1. 安装 xpath-selector 依赖
npm i @xiaohuohumax/xpath-selector
  1. 在 main.ts 中使用 xpath-selector
import xpathSelector from '@xiaohuohumax/xpath-selector'

const button = xpathSelector.selectFirstNode<HTMLButtonElement>('//button')
console.log(button) // Output: <button>Click Me</button>
  1. 修改 vite.config.ts 排除 xpath-selector 依赖
import { defineConfig } from 'vite'
import monkey, { cdn } from 'vite-plugin-monkey'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    monkey({
      build: {
        externalGlobals: {
          '@xiaohuohumax/xpath-selector': cdn.jsdelivr('xpathSelector', 'dist/index.lib.js'),
        },
      },
    }),
  ],
})

📦 使用示例

<!DOCTYPE html>
<html lang="en" charset="UTF-8">
<head>
    <title>hello world</title>
</head>
<body>
    <p>hello</p>
    <p>world</p>
    <a href="#">hello</a>
    <a href="#">world</a>
    <section>
        <!-- section内容 -->
    </section>
</body>
</html>

获取 title 节点的文本内容

const title = xpathSelector.selectString('//title/text()')
console.log(title) // hello world

获取所有 p 节点的文本内容

const pList = xpathSelector.selectStrings('//p/text()')
console.log(pList) // ['hello', 'world']

统计所有 a 节点的个数

const aCount = xpathSelector.selectNumber('count(//a)')
console.log(aCount) // 2

判断是否存在 section 节点

const hasSection = xpathSelector.selectBoolean('boolean(//section)')
console.log(hasSection) // true

获取全部的 a 节点

const aList = xpathSelector.selectNodes('//a')
console.log(aList) // [<a>hello</a>, <a>world</a>]

获取第一个 a 节点

const firstA = xpathSelector.selectFirstNode('//a')
console.log(firstA) // <a>hello</a>

获取 html 节点的全部属性

const htmlAttributes = xpathSelector.selectMap(`map:merge(
  for $attr in //html/@*
  return map:entry(local-name($attr), string($attr))
)`)
console.log(htmlAttributes) // {lang: "en", charset: "UTF-8"}

获取自定义 html 节点的 title 节点的文本内容

const customHtmlTitle = xpathSelector.selectString(
  '//title/text()',
  new DOMParser().parseFromString('<html><title>Hello</title></html>', 'text/html'),
)
console.log(customHtmlTitle) // Hello

🧩 依赖项目

🚨 免责声明

  • 本脚本仅供学习交流使用
  • 请勿用于任何商业用途
  • 使用本脚本产生的任何后果由用户自行承担

♻ 其他说明

GreasyFork 或者 ScriptCat 回复不及时,问题反馈推荐直接在 Github 提 Issue。

如果觉得本脚本对你有帮助,欢迎点个 ⭐ Star 支持一下!