文字置き換えを追加・軽微な修正

otoneko1102 · Nov 15, 2024 · 31237ae · 31237ae
1 parent 8430c6e
commit 31237ae
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 9 deletions.
diff --git a/main/replace/config.json b/main/replace/config.json
@@ -1,3 +1,4 @@
 {
-  "name": "文字置き換え"
+  "name": "文字置き換え",
+  "description": "文章中の文字を置き換えます"
 }
diff --git a/main/replace/index.html b/main/replace/index.html
@@ -6,15 +6,15 @@
     <title>Project Archive | 文字置き換え</title>
 
     <meta property="og:title" content="Project Archive | 文字置き換え">
-    <meta property="og:description" content="...">
+    <meta property="og:description" content="文章中の文字を置き換えます">
     <meta property="og:image" content="https://www.projectarchive.cloud/img/icon.png">
     <meta property="og:url" content="https://www.projectarchive.cloud">
     <meta property="og:type" content="website">
     <meta property="og:site_name" content="Project Archive">
 
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Project Archive | 文字置き換え">
-    <meta name="twitter:description" content="...">
+    <meta name="twitter:description" content="文章中の文字を置き換えます">
     <meta name="twitter:image" content="https://www.projectarchive.cloud/img/icon.png">
     <meta name="twitter:url" content="https://www.projectarchive.cloud">
     <meta name="twitter:site" content="@ProjectArchiveC">
@@ -23,17 +23,34 @@
     <link rel="manifest" href="/manifest.json">
     <link rel="apple-touch-icon" sizes="2048x2048" href="/img/icon.png">
     <link rel="stylesheet" href="/style.css" type="text/css">
+    <link rel="stylesheet" href="/main/replace/style.css" type="text/css">
   </head>
   <body>
     <img class="logo" src="/img/logo.png">
     <h2 id="name"></h2>
     <div id="description"></div>
     <section id="function">
-
+      <form id="main-form">
+        <div class="form-group">
+          <h2>変換前:</h2>
+          <textarea id="input-text" rows="5" cols="50"></textarea>
+        </div>
+        <div id="conversion-forms"></div>
+        <br>
+        <div class="buttons">
+          <button type="submit">変換</button>
+          <button type="button" class="gen" id="copyBtn">コピー</button>
+        </div>
+      </form>
+      <div>
+        <h2>変換後:</h2>
+        <textarea id="output-text" rows="5" cols="50" readonly></textarea>
+      </div>
     </section>
     <h2>サイトマップ</h2>
     <ul id="sitemap"></ul>
     <footer></footer>
     <script src="/script.js"></script>
+    <script src="/main/replace/script.js"></script>
   </body>
 </html>
diff --git a/main/replace/script.js b/main/replace/script.js
@@ -0,0 +1,65 @@
+function createForm() {
+  const newForm = document.createElement('div');
+  newForm.classList.add('form-group', 'conversion-form');
+
+  const inputText = document.createElement('input');
+  inputText.type = 'text';
+  inputText.classList.add('conversion-input');
+  inputText.placeholder = '変換前';
+
+  const outputText = document.createElement('input');
+  outputText.type = 'text';
+  outputText.classList.add('conversion-output');
+  outputText.placeholder = '変換後';
+
+  const removeButton = document.createElement('button');
+  removeButton.type = 'button';
+  removeButton.classList.add('remove-button');
+  removeButton.textContent = '-パターンを削除';
+  removeButton.addEventListener('click', function() {
+    newForm.remove();
+  });
+
+  newForm.appendChild(inputText);
+  newForm.appendChild(outputText);
+  newForm.appendChild(removeButton);
+
+  return newForm;
+}
+
+document.getElementById("copyBtn").addEventListener("click", function () {
+  const textArea = document.getElementById("output-text");
+  navigator.clipboard.writeText(textArea.value)
+    .then(() => alert("クリップボードにコピーしました！"))
+    .catch(err => console.error("クリップボードへのコピーに失敗しました: ", err));
+});
+
+document.getElementById('main-form').addEventListener('submit', function(event) {
+  event.preventDefault();
+
+  let inputText = document.getElementById('input-text').value;
+  const conversionInputs = document.getElementsByClassName('conversion-input');
+  const conversionOutputs = document.getElementsByClassName('conversion-output');
+
+  for (var i = 0; i < conversionInputs.length; i++) {
+    const input = conversionInputs[i].value;
+    const output = conversionOutputs[i].value;
+    const regex = new RegExp(input, 'g');
+    inputText = inputText.replace(regex, output);
+  }
+
+  const outputTextArea = document.getElementById('output-text');
+  outputTextArea.value = inputText;
+  outputTextArea.select();
+});
+
+const conversionForms = document.getElementById('conversion-forms')
+const addButton = document.createElement('button');
+addButton.type = 'button';
+addButton.textContent = '+パターンを追加';
+addButton.addEventListener('click', function() {
+  const newForm = createForm();
+  conversionForms.appendChild(newForm);
+});
+
+conversionForms.appendChild(addButton);
diff --git a/main/replace/style.css b/main/replace/style.css
@@ -0,0 +1,34 @@
+input {
+  font-size: 16px;
+  height: 20px;
+}
+
+button {
+  min-width: 75px;
+  max-width: 175px;
+}
+
+form h2, div h2 {
+  text-align: left;
+}
+
+.buttons {
+  width: 90%;
+  margin: 0 auto;
+  padding: 10px;
+  background-color: whitesmoke;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.form-group {
+  padding-top: 20px;
+}
+
+.remove-button {
+  max-width: auto;
+  width: 125px;
+  height: 25px;
+  margin: 5px;
+  padding: 5px;
+}
diff --git a/main/tategaki/index.html b/main/tategaki/index.html
@@ -49,7 +49,7 @@ <h2 id="name"></h2>
         <button type="button" class="gen" onclick="genText()">Text</button>
         <button type="button" class="gen" onclick="genHTML()">HTML</button>
         <button type="button" class="gen" onclick="genScript()">Script</button>
-        <button type="button" class="gen" id="copyBtn">Copy</button>
+        <button type="button" class="gen" id="copyBtn">コピー</button>
       </div>
       <form>
         <textarea id="output" rows="20" readonly></textarea>

diff --git a/main/tategaki/script.js b/main/tategaki/script.js
@@ -36,19 +36,24 @@ const replaceChars = {
   "〕": "︺",
 };
 
+const output = document.getElementById("output");
+
 function genText() {
   const content = tategaki(document.getElementById("content").value, "text");
-  document.getElementById("output").value = content;
+  output.value = content;
+  output.select()
 }
 
 function genHTML() {
   const content = tategaki(document.getElementById("content").value, "html");
-  document.getElementById("output").value = content;
+  output.value = content;
+  output.select()
 }
 
 function genScript() {
   const content = tategaki(document.getElementById("content").value, "script");
-  document.getElementById("output").value = content;
+  output.value = content;
+  output.select()
 }
 
 document.getElementById("copyBtn").addEventListener("click", function () {

diff --git a/pages.txt b/pages.txt
@@ -3,5 +3,5 @@
 /main/exchange/ 為替レート ...
 /main/fake/ 偽リンク生成 ...
 /main/ping/ サイトステータス 指定したページのステータスをチェックします
-/main/replace/ 文字置き換え ...
+/main/replace/ 文字置き換え 文章中の文字を置き換えます
 /main/tategaki/ 縦書き変換 横書きの文章を擬似的に縦書きに変換します