☰

Sleazy Fork is available in English.

Textarea to P on characterhub.org

Convert Textarea elements on characterhub.org into P elements, so that the translator can translate their content. (I use TWP)

  1. // ==UserScript==
  2. // @name        Textarea to P on characterhub.org
  3. // @namespace   https://greasyfork.org/users/1202784-az689
  4. // @match       https://*characterhub.org/*
  5. // @grant       GM_addStyle
  6. // @grant       GM_registerMenuCommand
  7. // @version     0.1.3
  8. // @author      az689
  9. // @license     CC Attribution-ShareAlike 4.0 International; http://creativecommons.org/licenses/by-sa/4.0/
  10. // @description Convert Textarea elements on characterhub.org into P elements, so that the translator can translate their content. (I use TWP)
  11. // @description:zh-CN  将characterhub.org上的Textarea元素转换成P元素, 使得翻译器能翻译其内容(我用的是TWP)
  12. // @description:fr  Convertir les éléments Textarea sur characterhub.org en éléments P, afin que les traducteurs puissent traduire leur contenu (j'utilise TWP)
  13. // @description:es  Convertir los elementos Textarea en characterhub.org a elementos P, para que los traductores puedan traducir su contenido (uso TWP)
  14. // @description:de  Konvertiere die Textarea-Elemente auf characterhub.org in P-Elemente, damit Übersetzer deren Inhalt übersetzen können (ich benutze TWP)
  15. // @description:pt  Converta os elementos Textarea em characterhub.org para elementos P, para que os tradutores possam traduzir seu conteúdo (eu uso TWP)
  16. // @description:ru  Преобразовать элементы Textarea на characterhub.org в элементы P, чтобы переводчики могли переводить их содержимое (я использую TWP)
  17. // @description:zh-TW  將characterhub.org上的Textarea元素轉換成P元素, 使得翻譯器能翻譯其內容(我用的是TWP)
  18. // @description:ja  characterhub.orgでTextarea要素をP要素に変換し、翻訳ツール(私はTWPを使用)でその内容を翻訳できるようにします。
  19. // ==/UserScript==
  20.  
  21. let dict = {
  22.     "&": "&",
  23.     "<": "&lt;",
  24.     ">": "&gt;",
  25.     '"': "&quot;",
  26.     "'": "&#39;",
  27.     "/": "&#x2F;",
  28.     "\n": "<br>",
  29.     "\r": "",
  30.     "\t": "&nbsp;&nbsp;&nbsp;&nbsp;",
  31.     " ": "&nbsp;",
  32. };
  33. let regex = new RegExp(
  34.     Object.keys(dict)
  35.     .map(key => key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"))//转义dict键中的正则表达式特殊字符
  36.     .join("|"), "gi");//并联所有键构建正则表达式
  37. let t2p = function() {
  38.     //遍历所有textarea
  39.     Array.from(document.getElementsByTagName("textarea")).forEach(
  40.         function (aTag) {
  41.             let pTag = document.createElement("p");
  42.             pTag.className = aTag.className + " pformtextarea";
  43.             pTag.innerHTML = aTag.value.replace(regex, (char => dict[char] || char));
  44.             //使用dict对textarea内的html进行转义
  45.             aTag.parentNode.replaceChild(pTag, aTag);
  46.         }
  47.     );
  48. };
  49.  
  50. GM_registerMenuCommand('Textarea to P', t2p);
  51.  
  52. let css = `#t2p_button {
  53.     display: block;
  54.     border: 2px solid;
  55.     margin-inline: 25px;
  56.     font-size: 1.3rem;
  57.     line-height: 1.57143;
  58. }
  59.  
  60. #t2p_button > div {
  61.     background-color: var(--lighter-almost-black);
  62.     padding: 2px;
  63.     text-align: center;
  64. }
  65.  
  66. #t2p_button > div:active {
  67.     filter: invert(100%);
  68. }
  69.  
  70. .pformtextarea {
  71.     padding-inline: 12px;
  72.     background-color: var(--almost-black-color);
  73. }
  74. `;
  75. GM_addStyle(css);
  76.  
  77. let add_t2p_button = function() {
  78.     let cc = document.getElementsByClassName("!visible text-sm")?.[0];
  79.     if (cc && !cc?.querySelector("#t2p_button")) {//容器存在且未添加按钮
  80.         cc.insertAdjacentHTML("afterbegin", "<div id='t2p_button'><div>Textarea to P</div></div>");
  81.         document.getElementById("t2p_button").addEventListener("click", t2p);
  82.     };
  83. };
  84. if (/\/characters\/|\/lorebooks\//.test(location.href)) {
  85.     (new MutationObserver(add_t2p_button))
  86.         .observe(document.body, { childList: true, subtree: true });
  87. };