Replace text content in a webpage(Revision)
// ==UserScript==
// @name 替换网页中的内容
// @name:en Replace content in a webpage(Revision)
// @name:zh-CN 替换网页中的内容
// @name:zh-TW 替換網頁中的內容
// @namespace http://tampermonkey.net/
// @version 2.0.1
// @description 替换网页中的文本内容
// @description:en Replace text content in a webpage(Revision)
// @description:zh-CN 替换网页中的文本内容
// @description:zh-TW 替換網頁中的文本內容
// @author linmii
// @editor zesion
// @include *
// @grant none
// ==/UserScript==
/**
* TO DO List
* 1.增加整页内容替换功能，个人感觉整页内容替换没什么意义
*
*
* 已知bug
* 1. 存在iframe的页面无法进行替换
*
*
* V1.0.3 2019-08-05 更新内容
* 1. 解决模态框弹出页面无法输入的问题。
* 2. 增加是否替换禁用文本框内容的功能
* 3. 修改脚本只替换文本框内容的功能
*
* V1.0.4 2019-12-31 更新内容
* 1. 解决一个页面出现多个替换图标的问题。
* 2. 解决在某些网页，弹窗飘到屏幕顶部无法输入的问题，如1688网站订单页面。
*
* V1.1 2020-02-06 更新内容，bug修复
* 1. 解决弹窗在不同网页中高度不一致的问题
* 2. 解决脚本在阿里云后台，谷歌云后台等某些网站无法使用的问题。
*
* V1.1.2
* 1. 清除数据后让查找输入框获得焦点
*
* V2.0
* 本次进行了大版本更新，基本上是重写整个插件，采用了jquery框架，解决了纯js需要适配复杂页面等问题。
*
* 新增功能：
* 1. 重写插件，采用jquery框架，修复插件在一些页面出现的各种无法使用问题
* 2. 增加勾选，实现替换功能定制化
* 3. 增加打开弹窗自动定位到查找输入框，方便输入
* 功能优化：
* 1. 优化弹出框高度的计算方法
* 2. 删除无用代码
* 3. 采用css方式对弹窗进行局中，去掉臃肿的js居中算法
* Bug修复：
* 1. 修复某些页面弹窗显示问题，如淘宝产品详情页
* 2. 修复某些页面插件报onclick, onmouseover等奇怪问题，导致插件无法使用的问题
* 3. 增加勾选，实现替换功能定制化
*
* V2.0.1
* 去掉jquery框架，继续采用原生javascrip编写插件，主要是发现jquery兼容问题比较差。
* 1. 修复原生JavaScript各种报错问题。
*/
var elements = [];
(function () {
'use strict';
initCss();
initModal();
initRImg();
initDialog();
removeTagAttibute('tabindex');
})();
/**
* 初始化css样式
*/
function initCss() {
var lmStyle = document.createElement("style");
lmStyle.type = "text/css";
lmStyle.innerHTML
= '.lm-r-button {'
+ 'padding: 10px 18px;'
+ 'font-size: 14px;'
+ 'border-radius: 4px;'
+ 'line-height: 1;'
+ 'white-space: nowrap;'
+ 'cursor: pointer;'
+ 'background: #409EFF;'
// + 'border: 1px solid #409EFF;'
+ 'border: none;'
+ 'color: #fff;'
+ 'font-weight: 500;'
+ '}'
+ '.lm-r-button:hover {background: #66b1ff; border-color: #66b1ff; color: #fff;}'
+ '.lm-r-button:focus {background: #66b1ff; border-color: #66b1ff; color: #fff;}'
+ '.lm-r-input {'
+ '-webkit-appearance: none;'
+ 'background-color: #fff;'
+ 'background-image: none;'
+ 'border-radius: 4px;'
+ 'border: 1px solid #dcdfe6;'
+ 'box-sizing: border-box;'
+ 'color: #606266;'
+ 'display: inline-block;'
+ 'font-size: 14px;'
+ 'height: 40px;'
+ 'line-height: 40px;'
+ 'outline: none;'
+ 'padding: 0 15px;'
+ 'transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);'
+ 'width: 100%;'
+ '}'
+ '.lm-r-input:hover {border-color: #C0C4CC;}'
+ '.lm-r-input:focus {border-color: #409EFF;}';
document.querySelector("head").appendChild(lmStyle);
}
/**
* 弹出框兼容
*/
function removeTagAttibute(attributeName){
var allTags = '*';
var specificTags = ['DIV', 'ARTICLE', 'INPUT'];
var allelems = document.querySelectorAll(specificTags);
var i,j= 0;
for(i = 0, j = 0; i < allelems.length; i++) {
allelems[i].removeAttribute(attributeName);
}
}
/**
* 初始化R图标
*/
function initRImg() {
var rImg = document.createElement("div");
rImg.id = "lm-r-img";
rImg.innerText = 'R';
rImg.style.cssText = "z-index: 999999; position: fixed; top: 0; left: 0; font-size: 14px; border-radius: 4px; background-color: #fff; width: 20px; height: 20px; text-align: center; opacity: 0.5; cursor: pointer; border: solid 1px #999999;";
/*if (document.querySelector("body")){
document.querySelector("body").prepend(rImg);
}*/
if(window.self === window.top){
if (document.querySelector("body")){
document.body.appendChild(rImg);
} else {
document.documentElement.appendChild(rImg);
}
}
rImg.addEventListener('click',function () {
document.querySelector("#lm-r-modal").style.display = 'block';
document.querySelector("#lm-dialog-div").style.display = 'block';
document.querySelector("#lm-find-content").focus();
});
rImg.addEventListener('mouseover', function () {
document.querySelector("#lm-r-img").style.opacity = 1;
});
rImg.addEventListener('mouseleave', function () {
document.querySelector("#lm-r-img").style.opacity = 0.5;
});
}
/**
* 初始化遮罩
*/
function initModal() {
var lmModal = document.createElement("div");
lmModal.id = 'lm-r-modal';
lmModal.style.cssText = 'position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.5; background: #000; z-index: 999999; display: none;';
lmModal.onclick = function () {
document.querySelector("#lm-close-btn").click();
};
document.querySelector("body").appendChild(lmModal);
}
/**
* 初始化弹出框
*/
function initDialog() {
var dialogDiv = document.createElement("div");
dialogDiv.id = "lm-dialog-div";
var htmlText = '<div>' +
'<input id="lm-find-content" class="lm-r-input" id="searchTxt" placeholder="请输入查找内容(支持正则)" >'+
'</div>' +
'<div style="margin-top: 5px;">' +
'<input id="lm-replace-content" class="lm-r-input" placeholder="请输入替换内容">' +
'</div>' +
'<div id="lm-switch-div" style="margin-top: 5px;">'+
'<label><input class="lm-r-checkbox" name="lm-r-checkbox[]" type="checkbox" id="lm-replace-text" value="text" checked />文本框</label> '+
'<label><input class="lm-r-checkbox" name="lm-r-checkbox[]" type="checkbox" id="lm-replace-disabled" value="disabled" />禁用文本框</label><br />'+
'<label><input class="lm-r-checkbox" name="lm-r-checkbox[]" type="checkbox" id="lm-replace-textarea" value="textarea" />多行文本域</label> '+
'<label><input class="lm-r-checkbox" name="lm-r-checkbox[]" type="checkbox" id="lm-replace-select" value="other" disabled/>其他文本</label>'+
'<br />'+
'</div>'+
'<div style="margin-top: 5px;">' +
'<button id="lm-replace-btn" class="lm-r-button">替 换</button>' +
'<button id="lm-clear-btn" class="lm-r-button" style="margin-left: 10px;">清 空</button>' +
'<button id="lm-close-btn" class="lm-r-button" style="margin-left: 10px;" >关 闭</button>' +
'</div>';
dialogDiv.innerHTML = htmlText;
dialogDiv.style.border = 'solid 1px grey';
dialogDiv.style.padding = '10px';
dialogDiv.style.zIndex = '99999999';
dialogDiv.style.position = 'fixed';
dialogDiv.style.display = 'none';
dialogDiv.style.background = '#fff';
dialogDiv.style.borderRadius = '4px';
dialogDiv.style.fontSize = '14px';
dialogDiv.style.left = '50%';
dialogDiv.style.top = '40%';
dialogDiv.style.marginLeft = '-100px';
dialogDiv.style.marginTop = '-50px';
var body = document.querySelector("body");
body.appendChild(dialogDiv);
}
/**
* 为dialogDiv的元素添加事件
*/
window.onload=function(){
//为替换按钮添加事件
var replaceBtnNode = document.getElementById("lm-replace-btn");
replaceBtnNode.addEventListener("click", replaceContent);
//为关闭按钮添加事件
var closeBtnNode = document.getElementById("lm-close-btn");
closeBtnNode.addEventListener("click", closeBindEvent);
//为清空按钮添加事件
var clearBtnNode = document.getElementById("lm-clear-btn");
clearBtnNode.addEventListener("click", function(){
document.querySelector("#lm-find-content").value="";
document.querySelector('#lm-replace-content').value = ""
document.querySelector("#lm-find-content").focus();
});
}
/**
* 判断需要替换的元素
*/
function replaceContent() {
var replaceCounts = 0;
var findText = document.querySelector("#lm-find-content").value;
var replaceText = document.querySelector("#lm-replace-content").value;
elements = [];
var disabledStatus = document.querySelector("#lm-replace-disabled").checked;
var checkboxEle = document.getElementsByName("lm-r-checkbox[]");
var count = checkboxEle.length;
for (var i = 0; i < count; i++) {
if(checkboxEle[i].checked) {
elements.push(checkboxEle[i].value);
}
}
//替换input元素内容
if(elements.indexOf('text') > -1 || elements.indexOf('disabled') > -1) {
replaceCounts += replaceInputContent(replaceCounts, findText, replaceText);
}
//替换多行文本框内容
if(elements.indexOf('textarea') > -1) {
replaceCounts += replaceTextareaContent(replaceCounts, findText, replaceText);
}
//替换其他文本内容
if(elements.indexOf('other') > -1) {
// To do...
}
alert("替换完成, 共替换 【"+ replaceCounts +"】 处文本.");
// 设置替换前的输入内容
document.querySelector("#lm-find-content").value = findText;
document.querySelector("#lm-replace-content").value = replaceText;
}
/**
* 替换部分文本 - 输入框和禁用输入框
*/
function replaceInputContent(replaceCounts, findText, replaceText) {
var disabledStatus = document.querySelector("#lm-replace-disabled").checked;
if ("" !== findText) {
var list = document.getElementsByTagName("input");
var textCount = list.length;
for(var i = 0;i < textCount;i++){
//判断是否替换禁用文本框的内容
if(true === list[i].disabled && false === disabledStatus) {
continue;
}
if(list[i].id === 'lm-find-content' || list[i].id === 'lm-replace-content') { //如果是弹出框则跳过
continue;
}
var txt = list[i].value;
if(list[i].type==="text" && "" !== txt && txt.indexOf(findText) >= 0){
var ret = txt.replace(new RegExp(findText, "gm"), replaceText);
list[i].value = ret;
replaceCounts++;
} else {
continue;
}
}
}
return replaceCounts < 1 ? 0 : replaceCounts;
}
/**
* 替换部分文本 - 文本域
*/
function replaceTextareaContent(replaceCounts, findText, replaceText) {
if ("" !== findText) {
var list = document.getElementsByTagName("textarea");
var textCount = list.length;
for (var i = 0; i < textCount; i++) {
var textVal = list[i].value;
if("" !== textVal && textVal.indexOf(findText) >= 0) {
var ret = textVal.replace(new RegExp(findText, "gm"), replaceText);
list[i].value = ret;
replaceCounts++;
}
}
}
return replaceCounts < 1 ? 0 : replaceCounts;
}
/**
* 隐藏弹窗
*/
function closeBindEvent() {
document.querySelector("#lm-close-btn").click();
document.querySelector("#lm-r-modal").style.display = 'none';
document.querySelector('#lm-dialog-div').style.display = 'none';
}