☰

Greasy Fork is available in English.

Auto Surround and Closing

Automatically closes parentheses, etc.

  1. // ==UserScript==
  2. // @name         Auto Surround and Closing
  3. // @name:ja      カッコとかを自動閉じ
  4. // @description:ja 自動でカッコとかクォーテーションを閉じる
  5. // @namespace    https://yakisova.com
  6. // @version      1.2.0
  7. // @description  Automatically closes parentheses, etc.
  8. // @author       yakisova41
  9. // @match        http://*/*
  10. // @match        https://*/*
  11. // @grant        none
  12. // @license      MIT
  13. // ==/UserScript==
  14.  
  15. 'use strict';
  16.  
  17. const tokens = {
  18.     '"': {
  19.         start: '"',
  20.         close: '"',
  21.         surround: true,
  22.         closing: true
  23.     },
  24.     "'": {
  25.         start: '"',
  26.         close: '"',
  27.         surround: true,
  28.         closing: true
  29.     },
  30.     "`": {
  31.         start: '`',
  32.         close: '`',
  33.         surround: true,
  34.         closing: true
  35.     },
  36.     "(": {
  37.         start: '(',
  38.         close: ')',
  39.         surround: true,
  40.         closing: true
  41.     },
  42.     "[": {
  43.         start: '[',
  44.         close: ']',
  45.         surround: true,
  46.         closing: true
  47.     },
  48.     "<": {
  49.         start: '<',
  50.         close: '>',
  51.         surround: true,
  52.         closing: false
  53.     },
  54.     "{": {
  55.         start: '{',
  56.         close: '}',
  57.         surround: true,
  58.         closing: true
  59.     }
  60. }
  61.  
  62.  
  63. function inputListener(elem) {
  64.     let valueState = "";
  65.  
  66.     elem.addEventListener("keydown", (e)=>{
  67.         if(Object.keys(tokens).includes(e.key)) {
  68.             const { selectionStart, selectionEnd } = e.target;
  69.             const {start, close, surround, closing} = tokens[e.key]
  70.  
  71.             const before = valueState.slice(0, selectionStart);
  72.             const after = valueState.slice(selectionEnd, valueState.length);
  73.  
  74.             if(selectionStart !== selectionEnd && surround) {
  75.                 e.preventDefault();
  76.  
  77.                 const selected = valueState.slice(selectionStart, selectionEnd);
  78.                 e.target.value = `${before}${start}${selected}${close}${after}`;
  79.                 e.target.setSelectionRange(selectionStart + 1, selectionEnd + 1);
  80.  
  81.                 
  82.             }
  83.             else if(closing) {
  84.                 e.preventDefault();
  85.  
  86.                 e.target.value = `${before}${start}${close}${after}`;
  87.                 e.target.setSelectionRange(selectionEnd+ 1, selectionEnd + 1);
  88.  
  89.                 const backspaceHandler = (e)=>{
  90.                     if(e.key === "Backspace") {
  91.                         e.preventDefault();
  92.                         const { selectionStart, selectionEnd } = e.target;
  93.                         const before = valueState.slice(0, selectionStart - 1);
  94.                         const after = valueState.slice(selectionEnd + 1, valueState.length);
  95.                         e.target.value = `${before}${after}`;
  96.                         e.target.setSelectionRange(selectionStart - 1, selectionStart - 1);
  97.                     }
  98.                     elem.removeEventListener("keydown", backspaceHandler);
  99.                 }
  100.                 elem.addEventListener("keydown", backspaceHandler)
  101.             }  (dawd)
  102.         }
  103.         
  104.         valueState = e.target.value;
  105.     });
  106. }
  107.  
  108. setInterval(()=>{
  109.     const inputs = document.querySelectorAll(`
  110.         input[type="text"]:not(.attached-auto-surround-and-closing),
  111.         input[type="search"]:not(.attached-auto-surround-and-closing),
  112.         textarea:not(.attached-auto-surround-and-closing)
  113.     `);
  114.     inputs.forEach(input => {
  115.         console.log(input)
  116.         inputListener(input)
  117.         input.classList.add("attached-auto-surround-and-closing")
  118.     });
  119.  
  120. }, 100);