---
layout: post
title: "替换脚本"
date: 2026-06-12 18:02:36 +08:00
categories: 拾光 随笔 时光存档
tags: 风正扬
excerpt: 一个用于保留文本的 Tampermonkey 脚本
---

这是一个 Tampermonkey 脚本，用于在特定网页中替换文本，同时保留原有 HTML 结构。

## 🔧 安装方式

1. 安装 [Tampermonkey](https://www.tampermonkey.net/)
2. 点击下方的 **“下载 / 安装脚本”** 按钮
3. 确认启用即可

<a class="btn btn--primary" href="/assets/js/保留文本替换.user.js">
  ▶ 下载 / 安装脚本
</a>

---

## 📜 脚本源码（可直接复制）

js
// ==UserScript==
// @name         本地TXT网页查看器
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  选择本地TXT，弹窗网页形式展示，支持字体脚本修改
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 唤起文件选择按钮
    const openBtn = document.createElement('button');
    openBtn.innerText = '打开本地TXT';
    openBtn.style = `
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999999;
        padding: 8px 16px;
        background: #2b88d8;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    `;
    document.body.appendChild(openBtn);

    // 隐藏文件选择器
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = '.txt';
    fileInput.style.display = 'none';
    document.body.appendChild(fileInput);

    // 外层遮罩容器
    let mask = null;
    // 文本展示主体
    let txtBox = null;

    // 关闭弹窗
    function closeView() {
        if(mask) mask.remove();
        mask = null;
        txtBox = null;
    }

    // 创建网页式弹窗
    function createViewer(fileName, content) {
        // 遮罩层
        mask = document.createElement('div');
        mask.style = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0,0,0,0.7);
            z-index: 99999999;
            display: flex;
            justify-content: center;
            align-items: center;
        `;
        mask.onclick = (e) => {
            if(e.target === mask) closeView();
        };

        // 内容容器（模拟网页页面）
        const wrap = document.createElement('div');
        wrap.style = `
            width: 85vw;
            height: 85vh;
            background: #fff;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        `;

        // 标题栏
        const titleBar = document.createElement('div');
        titleBar.style = `
            padding: 12px 16px;
            background: #f5f5f5;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        `;
        titleBar.innerHTML = `<span>${fileName}</span>`;

        // 关闭按钮
        const closeBtn = document.createElement('button');
        closeBtn.innerText = '关闭';
        closeBtn.style = `
            padding: 4px 12px;
            border: 1px solid #ccc;
            background: #fff;
            border-radius: 4px;
            cursor: pointer;
        `;
        closeBtn.onclick = closeView;
        titleBar.appendChild(closeBtn);

        // 文本显示区域（核心，字体脚本可正常作用于此）
        txtBox = document.createElement('div');
        txtBox.className = 'txt-content';
        txtBox.style = `
            flex: 1;
            padding: 20px;
            overflow: auto;
            white-space: pre-wrap;
            word-break: break-all;
            line-height: 1.6;
            font-size: 16px;
        `;
        txtBox.textContent = content;

        // 组装结构
        wrap.appendChild(titleBar);
        wrap.appendChild(txtBox);
        mask.appendChild(wrap);
        document.body.appendChild(mask);
    }

    // 绑定点击事件
    openBtn.onclick = () => fileInput.click();

    // 读取文件并渲染
    fileInput.onchange = function(e) {
        const file = e.target.files[0];
        if(!file) return;

        const reader = new FileReader();
        reader.onload = function(ev) {
            createViewer(file.name, ev.target.result);
        };
        // 读取文本，兼容大部分编码
        reader.readAsText(file);
        fileInput.value = '';
    };
})();