替换网页中的内容

替换网页中的文本内容

目前为 2020-02-08 提交的版本。查看 最新版本

// ==UserScript==
// @name         替换网页中的内容
// @name:en      Replace content in a webpage(Revision)
// @name:zh-CN   替换网页中的内容
// @name:zh-TW   替換網頁中的內容
// @namespace    http://tampermonkey.net/
// @version      2.0
// @description  替换网页中的文本内容
// @description:en     Replace text content in a webpage(Revision)
// @description:zh-CN  替换网页中的文本内容
// @description:zh-TW  替換網頁中的文本內容
// @require      https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js
// @author       linmii
// @editor       zesion
// @include      *
// @grant        none
// ==/UserScript==
/**
 * TO DO List
 *   1.增加整页内容替换功能,个人感觉整页内容替换没什么意义
 *
 *
 * 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. 增加勾选,实现替换功能定制化
 */

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: 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(window.self === window.top){
		if (document.querySelector("body")){
			document.body.appendChild(rImg);
		} else {
			document.documentElement.appendChild(rImg);
		}
	}
}

$(document).on('click', '#lm-r-img', function(){
	showDialog();
	$('#lm-find-content').focus();
});
$(document).on('mouseover', '#lm-r-img', function(){$(this).css('opacity',1)});
$(document).on('mouseleave', '#lm-r-img', function(){$(this).css('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: 99999999; display: none;';
	lmModal.onclick = function () {
		document.querySelector("#lm-btn-close").click();
	};
	document.querySelector("body").appendChild(lmModal);
}

/**
 * 初始化弹出框
 */
function initDialog() {
	var dialogDiv = '<div id="lm-dialog-div" style="border: 1px solid grey; padding: 10px; z-index: 999999999; position: fixed; display: none; background: rgb(255, 255, 255); border-radius: 4px; font-size: 14px; left: 50%; top: 40%; margin-left: -100px; margin-top: -50px;">' +
						'<div>' +
							'<input id="lm-find-content" class="lm-r-input" id="searchTxt" placeholder="请输入查找内容(支持正则)" >'+
						'</div>' +
						'<div style="margin-top: 5px;">' +
							'<input id="lm-replace-content" id="replaceTxt" 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>&nbsp;&nbsp;'+
							'<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>&nbsp;&nbsp;'+
							'<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 style="margin-left: 10px;" class="lm-r-button" id="lm-btn-clear">清 空</button>' +
							'<button id="lm-btn-close" style="margin-left: 10px;" class="lm-r-button">关 闭</button>' +
						'</div>' +
					'</div>';
	$('body:first').append(dialogDiv);
}

$(document).on('click', '#lm-btn-close', function(){ hideDialog(); });
$(document).on('click', '#lm-btn-clear', function(){
	$('#lm-find-content').val('');
	$('#lm-replace-content').val('');
	$('#lm-find-content').focus();
});

/**
 * 显示弹窗
 */
function showDialog() {
	$('#lm-r-modal').show();
	$('#lm-dialog-div').show();
}

/**
 * 隐藏弹窗
 */
function hideDialog() {
	$('#lm-r-modal').hide();
	$('#lm-dialog-div').hide();
}

/**
 * 判断需要替换的内容
 */
$(document).on('click', '#lm-replace-btn', function(){
	var replaceCounts 	= 0;
	var findText 		= $("#lm-find-content").val();
	var replaceText 	= $("#lm-replace-content").val();

    elements = [];
	$('input[name="lm-r-checkbox[]"]:checked').each(function(){
		if($(this).prop("checked")){
			elements.push($(this).val());
		}
	});

	if($.inArray('text', elements) > -1 || $.inArray('disabled', elements) > -1) {
		replaceCounts += replaceInputContent(replaceCounts);
	}
	if($.inArray('textarea', elements) > -1) {
		console.log('开始:' + replaceCounts);
		replaceCounts += replaceTextareaContent(replaceCounts);
		console.log('结束:' + replaceCounts);
	}
	if($.inArray('other', elements) > -1) {
		replaceCounts += replaceOtherContent(replaceCounts);
	}
	//To do ...

	// 设置替换前的输入内容
	$("#lm-find-content").val(findText);
	$("#lm-replace-content").val(replaceText);

    $("#lm-find-content").focus();
	alert("替换完成, 共替换 【"+(replaceCounts)+"】 处文本.");
});


/**
 * 替换部分文本 - 输入框和禁用输入框
 */
function replaceInputContent(replaceCounts) {
	var findText 		= $("#lm-find-content").val();
	var replaceText 	= $("#lm-replace-content").val();
	var disabledStatus	= $.inArray('disabled', elements) > -1 ? true : false;
	if ("" !== findText) {
		var list = document.getElementsByTagName("input");
		$.each(list, function(key, val) {
			var textVal = $(this).val();
			if("disabled" === $(this).attr('disabled') && false === disabledStatus) {
				return;		//continue
			}
			if("" !== textVal && textVal.indexOf(findText) >= 0 && $(this).attr('id') != 'lm-find-content') {
				var ret = textVal.replace(new RegExp(findText, "gm"), replaceText);
				$(this).val(ret);
				replaceCounts++;
				console.log('替换:' + replaceCounts);
			}
		});
	}
	return replaceCounts;
}

/**
 * 替换部分文本 - 文本域
 */
function replaceTextareaContent(replaceCounts) {
	var findText 		= $("#lm-find-content").val();
	var replaceText 	= $("#lm-replace-content").val();
	if ("" !== findText) {
		var list = document.getElementsByTagName("textarea");
		$.each(list, function(key, val){
			var textVal	= $(this).val();
			if("" !== textVal && textVal.indexOf(findText) >= 0) {
				var ret = textVal.replace(new RegExp(findText, "gm"), replaceText);
				$(this).val(ret);
				replaceCounts++;
				console.log('替换:' + replaceCounts);
			}
		});
	}
	return replaceCounts;
}


/**
 * 替换其他内容, To do...
 */
function replaceAllContent(){
	/*var findText 		= $("#lm-find-content").val();
	var replaceText 	= $("#lm-replace-content").val();
    var list = [];
	if ("" !== findText) {
        list.push(document.getElementsByTagName("select"));


	}*/
}

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址