番组开发 » 讨论
[组件] infobox 属性超链接化

// ==UserScript==

// @name         Bangumi Infobox Link

// @namespace

// @version      2024-04-06

// @description  try to take over the world!

// @author       AE

// @match        https://bgm.tv/person/*

// @match        https://bgm.tv/subject/*

// @grant        none

// ==/UserScript==



// 小心iOS的行为： https://meta.stackexchange.com/questions/243640/stop-safari-mobile-from-converting-7-digits-numbers-into-tel-format



(function () {

  "use strict";



  const icons = {

    twitter: `<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#1da1f2" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM351.3 199.3v0c0 86.7-66 186.6-186.6 186.6c-37.2 0-71.7-10.8-100.7-29.4c5.3 .6 10.4 .8 15.8 .8c30.7 0 58.9-10.4 81.4-28c-28.8-.6-53-19.5-61.3-45.5c10.1 1.5 19.2 1.5 29.6-1.2c-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3c-9-6-16.4-14.1-21.5-23.6s-7.8-20.2-7.7-31c0-12.2 3.2-23.4 8.9-33.1c32.3 39.8 80.8 65.8 135.2 68.6c-9.3-44.5 24-80.6 64-80.6c18.9 0 35.9 7.9 47.9 20.7c14.8-2.8 29-8.3 41.6-15.8c-4.9 15.2-15.2 28-28.8 36.1c13.2-1.4 26-5.1 37.8-10.2c-8.9 13.1-20.1 24.7-32.9 34c.2 2.8 .2 5.7 .2 8.5z"/></svg>`,

    pixiv: `<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#0097fa" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zm171.5 84c41 0 76.3 12.9 101.4 35.2l0 0c25.2 22.2 39.8 54.1 39.8 88.8c.1 35.3-16.6 66.3-42.4 87c-25.9 20.8-60.6 32.4-98.8 32.4c-43.5 0-83.8-16.1-83.8-16.1v51.8c7.4 2.2 19.7 7 11.9 14.8H104.8c-7.7-7.8 3.6-12.4 12.1-14.8V175.5C97.1 190.9 87 204.3 81.8 214.2c6 19.4-5.3 18.5-5.3 18.5L56 199.7s72.7-83.7 179.5-83.7zm-3.6 222.9c30 0 56-11.3 73.9-29.2c17.9-18.1 27.9-41.6 28-70.2c-.1-29.3-9.5-54.6-26.7-73.6c-17.2-18.9-42.7-31.3-75.2-31.4c-26.7-.1-59.8 9-80.2 23.7V323.1c18.6 9.3 46.8 15.9 80.2 15.8z"/></svg>`,

  };



  const socialMediaPatterns = [

    {

      name: "pixiv",

      regex: [/^pixiv$/i],

      urlPatterns: [

        [/^([0-9]+)$/i, "https://www.pixiv.net/users/$1"],

        [/^id=([0-9]+)$/i, "https://www.pixiv.net/users/$1"],

        [/^.*?users\/([0-9]+)$/i, "https://www.pixiv.net/users/$1"],

      ],

      icon: icons.pixiv,

    },

    {

      name: "twitter",

      regex: [/^(X|Twitter|X\(旧?Twitter\)|推特)$/i],

      urlPatterns: [[/^@(.+)$/i, "https://twitter.com/$1"]],

      icon: icons.twitter,

    },

  ];



  const isValidUrl = (url) => {

    return /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/i.test(

      url

    );

  };



  const updateInfoboxLinks = () => {

    const infobox = document.querySelector("#infobox");

    if (!infobox) return;



    infobox.querySelectorAll("li").forEach((li) => {

      if (li.childNodes[0].tagName !== "SPAN") return;

      const label = li.childNodes[0].textContent;

      if (!label.endsWith(": ")) return;



      const propertyName = label.slice(0, -2);

      const propertyValue = li.textContent.slice(label.length);

      let matchedUrl = null;



      for (const { regex, urlPatterns, icon } of socialMediaPatterns) {

        if (regex.some((pattern) => pattern.test(propertyName))) {

          urlPatterns.some(([pattern, template]) => {

            if (pattern.test(propertyValue)) {

              matchedUrl = propertyValue.replace(pattern, template);

              li.innerHTML = `${li.childNodes[0].outerHTML}<a href="${matchedUrl}" target="_blank" class="l external">${icon}${propertyValue}</a>`;

              return true;

            }

            return false;

          });

        }



        if (matchedUrl) break;

      }



      if (!matchedUrl && isValidUrl(propertyValue)) {

        li.innerHTML = `${li.childNodes[0].outerHTML}<a href="${propertyValue}" target="_blank" class="l external">${propertyValue}</a>`;

      }

    });

  };



  updateInfoboxLinks();



})();

a.external svg {

  margin-right: 4px;

  vertical-align: middle;

}