// ==UserScript==
// @name         替换网页中的内容
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  替换网页中的文本内容
// @author       linmii
// @include      *
// @grant        none
// @downloadURL none
// ==/UserScript==
(function () {
    'use strict';
    initRImg();
    initDialog();
    window.onscroll = function () {
        document.querySelector("#lm-r-img").style.top = document.documentElement.scrollTop + 'px';
        let dialogDiv = document.querySelector("#lm-dialog-div");
        dialogDiv.style.left = (document.documentElement.clientWidth - dialogDiv.style.width.replace('px', '')) / 2 + document.documentElement.scrollLeft + "px";
        let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        dialogDiv.style.top = (document.documentElement.clientHeight - dialogDiv.style.width.replace('px', '')) / 2 + scrollTop + "px";
    }
})();

function initRImg() {
    let rImg = document.createElement("div");
    rImg.id = "lm-r-img";
    rImg.innerText = 'R';
    let top = document.documentElement.scrollTop + 'px';
    rImg.style.cssText = "z-index: 999999; position: absolute; top: " + top + "; left: 0; border-radius: 4px; background-color: #fff; width: 20px; height: 20px; text-align: center; opacity: 0.5; cursor: pointer;";
    document.querySelector("body").prepend(rImg);
    bindEvent();
}

function initDialog() {
    let dialogDiv = document.createElement("div");
    dialogDiv.id = "lm-dialog-div";
    let htmlText = '<div><input id="lm-find-content" placeholder="请输入查找内容(支持正则)" style="width: 230px;"></div>';
    htmlText += '<div style="margin-top: 5px;"><input id="lm-replace-content" placeholder="请输入替换内容" style="width: 230px;"></div>';
    htmlText += '<div style="margin-top: 5px;">';
    htmlText += '<button id="lm-replace-btn">替 换</button>';
    htmlText += '<button style="margin-left: 20px;" onclick="document.querySelector(\'#lm-find-content\').value = \'\';document.querySelector(\'#lm-replace-content\').value = \'\';">清 空</button>';
    htmlText += '<button style="margin-left: 20px;" onclick="document.querySelector(\'#lm-dialog-div\').style.display = \'none\';">关 闭</button>';
    htmlText += '</div>';
    dialogDiv.innerHTML = htmlText;
    dialogDiv.style.border = 'solid 1px grey';
    dialogDiv.style.padding = '10px';
    dialogDiv.style.textAlign = 'center';
    dialogDiv.style.zIndex = '99999999';
    dialogDiv.style.position = 'absolute';
    dialogDiv.style.display = 'none';
    dialogDiv.style.width = '250px';
    dialogDiv.style.height = '110px';
    dialogDiv.style.background = '#fff';
    dialogDiv.style.left = (document.documentElement.clientWidth - dialogDiv.style.width.replace('px', '')) / 2 + document.documentElement.scrollLeft + "px";
    let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    dialogDiv.style.top = (document.documentElement.clientHeight - dialogDiv.style.width.replace('px', '')) / 2 + scrollTop + "px";
    let body = document.querySelector("body");
    body.appendChild(dialogDiv);
    document.querySelector("#lm-replace-btn").addEventListener("click", replaceContent);
}

function replaceContent() {
    let findText = document.querySelector("#lm-find-content").value;
    let replaceText = document.querySelector("#lm-replace-content").value;
    if ("" !== findText && "" !== replaceText) {
        let body = document.querySelector("body");
        body.innerHTML = body.innerHTML.replace(new RegExp(findText, "gm"), replaceText);
        // 设置替换前的输入内容
        document.querySelector("#lm-find-content").value = findText;
        document.querySelector("#lm-replace-content").value = replaceText;
        // 重新绑定替换点击事件
        document.querySelector("#lm-replace-btn").addEventListener("click", replaceContent);
        bindEvent();
    }
}

function bindEvent() {
    let rImg = document.querySelector("#lm-r-img");
    rImg.onclick = function () {
        document.querySelector("#lm-dialog-div").style.display = 'block';
    };
    rImg.onmouseover = function () {
        document.querySelector("#lm-r-img").style.opacity = 1;
    };
    rImg.onmouseleave = function () {
        document.querySelector("#lm-r-img").style.opacity = 0.5;
    };
}