☰

Input Reolacer

批量替换输入框中文字。

Versão de: 19/09/2020. Veja: a última versão.

// ==UserScript==
// @name        Input Reolacer
// @namespace   Input Reolacer
// @match       *://*/*
// @grant       GM_addStyle
// @grant       GM_registerMenuCommand
// @version     1.0.0
// @author      稻米鼠
// @created     2020/9/19 下午1:12:20
// @update      2020/9/19 下午1:12:20
// @description 批量替换输入框中文字。
// ==/UserScript==

GM_addStyle(`
#input-replacer-userscript-panel {
  position: fixed;
  top: -10px;
  left: -10px;
  box-sizing: border-box;
  width: calc(100vw + 20px);
  height: calc(100vh + 20px);
  padding: 30px 0;
  font-size: 18px;
  /* display: none; */
}
#input-replacer-userscript-panel * {
  box-sizing: border-box;
  font-size: 18px;
  line-height: 1.6em;
}
#input-replacer-userscript-panel.input-replacer-mask {
  background: rgba(0, 0, 0, .6);
}
#input-replacer-userscript-panel.input-replacer-show {
  display: block;
}
#input-replacer-userscript-panel.input-replacer-hide {
  display: none;
}
#input-replacer-userscript-panel > .input-replacer-panel {
  position: relative;
  width: 92%;
  max-width: 800px;
  max-height: calc(100vh - 40px);
  padding: 30px;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .6);
  background: #FFF;
}
#input-replacer-userscript-panel > .input-replacer-panel > .input-replacer-panel-close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #666;
  text-align: right;
  cursor: pointer;
}
#input-replacer-userscript-panel > .input-replacer-panel > .input-replacer-panel-header {

}
#input-replacer-userscript-panel > .input-replacer-panel > .input-replacer-panel-header > h2 {
  text-align: center;
  font-size: 36px;
  color: black;
}
#input-replacer-userscript-panel > .input-replacer-panel > .input-replacer-panel-header > p {
  text-align: center;
  color: #666;
}
#input-replacer-userscript-panel > .input-replacer-panel > .input-replacer-input-group > label,
#input-replacer-userscript-panel > .input-replacer-panel > .input-replacer-input-group > input {
  display: block;
}
#input-replacer-userscript-panel > .input-replacer-panel > .input-replacer-input-group > input {
  color: #666;
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}
#input-replacer-userscript-panel > .input-replacer-panel > div > button {
  display: block;
  width: 100%;
  color: white;
  background: #04ABFF;
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  test-align: center;
  border: none;
  border-raduis: 3px;
}
`)
let panelObj
/**
 * 获取页面中最大的 z-index，并加 1
 *
 * @return {*} 最大 z-index
 */
const maxZIndex = ()=>{
  let zIndex = 0
  document.body.querySelectorAll('*').forEach(el=>{
    if(!isNaN(window.getComputedStyle(el).zIndex)){
      const newZ = +window.getComputedStyle(el).zIndex
      zIndex = zIndex > newZ ? zIndex : newZ
    }
  })
  return zIndex+1
}
const replaceAllInput = e=>{
  const input0 = panelObj.panel.querySelector('#input-replacer-input-group-0').value
  const input1 = panelObj.panel.querySelector('#input-replacer-input-group-1').value
  if(/^\/.*\/[a-z]*$/.test(input0)){
    const regContent = input0.replace(/^\//, '').replace(/\/[a-z]*/, '').replace(/\\/g, '\\')
    const regFlag = input0.replace(/^\/.*\/([a-z]*)$/, '$1')
    const reg = new RegExp(regContent, regFlag)
    document.body.querySelectorAll('input[type=text], input[type=email], input[type=number], input[type=url], textarea').forEach(el=>{
      el.value = el.value.replace(reg, input1)
    })
  }else{
    document.body.querySelectorAll('input[type=text], input[type=email], input[type=number], input[type=url], textarea').forEach(el=>{
      el.value = el.value.replaceAll(input0, input1)
    })
  }
  panelObj.panel.classList.add('input-replacer-hide')
}
const addPanel = ()=> {
  // 创建容器
  const container = document.createElement('div')
  container.id = 'input-replacer-userscript-panel'
  container.classList.add('input-replacer-mask')
  container.style = 'z-index: '+maxZIndex()+';'
  // 添加面板
  const panel = document.createElement('div')
  panel.classList.add('input-replacer-panel')
  container.appendChild(panel)
  // 注入关闭按钮
  const closeButton = document.createElement('div')
  closeButton.classList.add('input-replacer-panel-close')
  closeButton.innerText = 'Close'
  closeButton.onclick = ()=>{
    if(confirm('确认关闭？')){
      container.classList.add('input-replacer-hide')
    }
  }
  panel.appendChild(closeButton)
  // 注入标题和描述
  const panelHeader = document.createElement('div')
  panelHeader.classList.add('input-replacer-panel-header')
  panelHeader.innerHTML = `
  <h2>输入框查找替换</h2>
  <p>对页面中所有输入框和文本域的内容进行批量替换。</p>
  `
  panel.appendChild(panelHeader)
  // 设置输入框组
  const inputNameGroup = ['要查找的内容（支持正则表达式）', '要替换为的内容（支持 $1、$2……替代分组）']
  for(const name of inputNameGroup){
    const inputGroup = document.createElement('div')
    inputGroup.classList.add('input-replacer-input-group')
    inputGroup.innerHTML = `
    <label for="input-replacer-input-group-`+ inputNameGroup.indexOf(name) +`">`+ name +`</label>
    <input id="input-replacer-input-group-`+ inputNameGroup.indexOf(name) +`">
    `
    // inputGroup.querySelector('input').addEventListener('keyup', inputChange)
    panel.appendChild(inputGroup)
  }
  // 注入替换按钮
  const buttonArea = document.createElement('div')
  buttonArea.innerHTML = `
  <button>替换全部</button>
  `
  buttonArea.querySelector('button').addEventListener('click', replaceAllInput)
  panel.appendChild(buttonArea)
  // 注入预览区
  const previwArea = document.createElement('div')
  previwArea.id = 'input-replacer-preview'
  panel.appendChild(previwArea)
  // 向页面注入容器
  document.body.appendChild(container)
  return {
    panel: container,
    previwArea
  }
}

GM_registerMenuCommand('测试', ()=>{
  if(panelObj){
    panelObj.panel.classList.remove('input-replacer-hide')
  }else{
    panelObj = addPanel()
  }
})
长期地址
遇到问题？请前往 GitHub 提 Issues。