☰

生成纯元素CSS选择器

generate a element-only CSS selector

// ==UserScript==
// @name         生成纯元素CSS选择器
// @namespace    coycs.com
// @version      1.0.0
// @description  generate a element-only CSS selector
// @author       coycs
// @match        http://*/*
// @match        https://*/*
// @grant        GM_registerMenuCommand
// @run-at       document-end
// @license MIT
// ==/UserScript==

(function () {
  "use strict";

  // 根据选择器生成元素选择器
  const genTagSelector = (selector) => {
    let targetNode = document.querySelector(selector);
    let tagSelector = "";
  
    while (targetNode.nodeName != "BODY") {
      const parentNode = targetNode.parentNode;
      const childNodes = Array.from(parentNode.childNodes).filter(node => node.nodeName != "#text" && node.nodeName != "#comment");
      const tagName = targetNode.tagName.toLowerCase();
      let nthIndex = 0;
  
      // 判断父元素下目标元素的标签名是否唯一
      if (childNodes.filter(node => node.tagName.toLowerCase() == tagName).length == 1) {
        if (parentNode.nodeName != "BODY") {
          tagSelector = ` > ${tagName}` + tagSelector;
        } else {
          tagSelector = `body > ${tagName}` + tagSelector;
        }
  
      } else {
        // 获取nth-child的序号
        for (let i = 0; i < childNodes.length; i++) {
          if (childNodes[i] === targetNode) {
            nthIndex = i + 1;
            break;
          }
        };
  
        if (parentNode.nodeName != "BODY") {
          tagSelector = ` > ${tagName}:nth-child(${nthIndex})` + tagSelector;
        } else {
          tagSelector = `body > ${tagName}:nth-child(${nthIndex})` + tagSelector;
        }
        
      }
  
      targetNode = parentNode;
    }
  
    return tagSelector;
  }
  // 转换选择器
  const tranSelector = () => {
    const promptContent = window.prompt("请将原始的选择器粘贴在下面");
    // 判断粘贴内容是否合格
    if (promptContent === null) {// 点击取消按钮
      return;
    } else if (promptContent === "") {// 输入框内容为空时点击确定
      window.alert("内容为空！");
    } else if (!document.querySelector(promptContent)) {// 选择器无效
      window.alert("请检查选择器是否正确！");
    } else {
      const tagSelector = genTagSelector(promptContent);
      window.alert(tagSelector);
    }
  }


  GM_registerMenuCommand("输入选择器", tranSelector, "t");
})();