【分享】让链接变得可以点击的油猴脚本

分享 MoyF • 查看1k

效果如图:

可以让文本内含有的链接变成可以点击的超链接。

使用方法

在油猴里创建新的脚本,并粘贴下列内容:


// ==UserScript==

// @name        自动链接替换

// @namespace   Violentmonkey Scripts

// @match       https://marker.dotalk.cn/*

// @grant       none

// @version     1.0

// @author      Moy

// @description Automatically convert URLs to clickable links, including dynamically loaded content

// ==/UserScript==

(function() {

    'use strict';

    // 处理文本节点中的链接

    function processTextNode(node) {

        if (node.parentNode.tagName === 'SCRIPT' ||

            node.parentNode.tagName === 'STYLE' ||

            node.parentNode.tagName === 'NOSCRIPT' ||

            node.parentNode.tagName === 'A' ||

            node.parentNode.closest('a')) {

            return;

        }

        const urlRegex = /(https?:\/\/[^\s]+)/g;

        const text = node.textContent;

        if (urlRegex.test(text)) {

            const wrapper = document.createElement('span');

            wrapper.innerHTML = text.replace(urlRegex, (url) => {

                // 移除URL末尾的标点符号

                const cleanUrl = url.replace(/[.,;!?]$/, '');

                return `<a href="${cleanUrl}"

                          target="_blank"

                          rel="noopener noreferrer"

                          onclick="window.open('${cleanUrl}', '_blank'); return false;"

                          style="color: -webkit-link; text-decoration: underline; cursor: pointer;"

                       >${url}</a>`;

            });

            // 添加标记,避免重复处理

            wrapper.setAttribute('data-processed', 'true');

            node.parentNode.replaceChild(wrapper, node);

        }

    }

    // 处理新添加或修改的节点

    function processNode(node) {

        // 如果节点已经处理过,跳过

        if (node.nodeType === Node.ELEMENT_NODE &&

            (node.getAttribute('data-processed') === 'true' || node.closest('[data-processed="true"]'))) {

            return;

        }

        // 如果是文本节点,直接处理

        if (node.nodeType === Node.TEXT_NODE) {

            processTextNode(node);

            return;

        }

        // 如果是元素节点,遍历其子节点

        if (node.nodeType === Node.ELEMENT_NODE) {

            // 使用TreeWalker遍历文本节点

            const walker = document.createTreeWalker(

                node,

                NodeFilter.SHOW_TEXT,

                {

                    acceptNode: function(node) {

                        if (node.parentNode.tagName === 'SCRIPT' ||

                            node.parentNode.tagName === 'STYLE' ||

                            node.parentNode.tagName === 'NOSCRIPT' ||

                            node.parentNode.tagName === 'A' ||

                            node.parentNode.closest('a') ||

                            node.parentNode.closest('[data-processed="true"]')) {

                            return NodeFilter.FILTER_REJECT;

                        }

                        return NodeFilter.FILTER_ACCEPT;

                    }

                }

            );

            let textNode;

            while (textNode = walker.nextNode()) {

                processTextNode(textNode);

            }

        }

    }

    // 创建MutationObserver来监听DOM变化

    const observer = new MutationObserver((mutations) => {

        mutations.forEach(mutation => {

            // 处理新增的节点

            mutation.addedNodes.forEach(node => {

                processNode(node);

            });

            // 处理修改的节点

            if (mutation.type === 'characterData') {

                processNode(mutation.target);

            }

        });

    });

    // 配置观察选项

    const config = {

        childList: true,      // 观察子节点的变化

        subtree: true,        // 观察所有后代节点

        characterData: true   // 观察文本内容的变化

    };

    // 开始观察整个文档

    observer.observe(document.body, config);

    // 初始处理页面上的现有内容

    processNode(document.body);

})();
共收到4条回复
【分享】让链接变得可以点击的油猴脚本 肥肥猫xyz
肥肥猫xyz ⚡⚡ #1 回复
👍👍 厉害
【分享】让链接变得可以点击的油猴脚本 W35242543
W35242543 #2 回复
这个是基本功能,五彩后台应该内置的
【分享】让链接变得可以点击的油猴脚本 肥肥猫xyz
肥肥猫xyz ⚡⚡ #3 回复
@W35242543 好的收到
【分享】让链接变得可以点击的油猴脚本 W35046390
W35046390 #4 回复
多谢大神分享
登录后即可参与回复