如何编写用户脚本用title属性值替换截断的卡片标题文本

该网站的Bootstrap风格卡片中，商品名称字符数达到一定长度时会被...截断，但鼠标悬停显示的tooltip（对应元素的title属性）存储了完整的商品名称。以下是实现自动将截断文本替换为完整名称的用户脚本：

脚本代码 #

// ==UserScript==
// @name         替换截断的商品名称为完整Tooltip文本
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  将卡片中截断的商品名替换为tooltip里的完整名称
// @match        https://e-katalog.lkpp.go.id/productsearchcontroller/listproduk*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 处理已加载的卡片
    const replaceTruncatedTitles = () => {
        const titleLinks = document.querySelectorAll('.card-item-title a[data-toggle="tooltip"]');
        titleLinks.forEach(link => {
            const fullTitle = link.getAttribute('title');
            if (fullTitle && link.textContent.includes('...')) {
                link.textContent = fullTitle;
            }
        });
    };

    // 页面加载后立即执行一次
    replaceTruncatedTitles();

    // 监听动态加载的内容，适配滚动加载场景
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            if (mutation.addedNodes.length) {
                replaceTruncatedTitles();
            }
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();

脚本说明 #

• 初始替换：页面加载完成后，自动定位所有带截断标记...的商品名称链接，用title属性的完整文本替换截断内容
• 动态内容适配：通过MutationObserver监听页面DOM变化，当新卡片滚动加载时，自动触发替换逻辑
• 页面范围控制：脚本仅在指定的商品列表页面生效，不会影响网站其他板块

内容的提问来源于stack exchange，提问作者Retsu Asakura