JavaScript特殊文字を置換してフォーム内に入力する

Question

Form1はテキストを追加し、Form2はForm1と同じテキストを入力しますが、replaceメソッドを使用して変換します。私はあなたの期待される出力が得られますjsコードの下に...

<form id="form1"> 
<input type="text" name="input" value=""> 
<button type="submit" name="submit" value="submit">Submit</button> 
</header> 
<div> 
    <label>Plain Text:</label> 
    <form id="form2"> 
    <input type="text" name="input" value="" onchange="convertMarkdown()"> 
</div> 
</div> 
<script> 
    function convertMarkdown() { 

     const form = document.getElementById("form1"); 
     const input = form.querySelector("input"); 
     const form2 = document.getElementById("form2"); 
     const convertedMarkdown = input.replace(/[(\*)(\>)(\#)(\[)(\))]/g, "").replace(/[(\]\()]/g, " "); 

     form.addEventListener('submit', (e) => { 
      // prevent browser default 
      e.preventDefault(); 

      // contain text content 
      const text = input.value; 

      // print text content in form1 
      form1.textContent = text.text 
     }); 

     form2.addEventListener('onchange', (e) => { 
     // prevent browser default 
     e.preventDefault(); 

     // contain text content 
     const text = input.value; 

     // print converted text in form2 
     form2.textContent = input.replace(/[(\*)(\>)(\#)(\[)(\))]/g, "").replace(/[(\]\()]/g, " "); 
    }; 
</script> 

Answer 1

これをForm2の中にテキストを取り込む問題を抱えています。

const submit = document.getElementById("submit"); 
 
const input = document.getElementById("ip1"); 
 

 
submit.addEventListener('click', (e) => { 
 
    // prevent browser default 
 
    e.preventDefault(); 
 
    const convertedMarkdown = input.value.replace(/[(\*)(\>)(\#)(\[)(\))]/g, "").replace(/[(\]\()]/g, " "); 
 
    // contain text content 
 
    const text = input.value; 
 

 
    // print text content in form1 
 
    document.forms["form2"]["input2"].value = convertedMarkdown; 
 
});

<form name="form1"> 
 
    <input id="ip1" type="text" name="input" value=""> 
 
    <button id="submit" type="submit" name="submit" value="submit">Submit</button> 
 
</form> 
 
<div> 
 
    <label>Plain Text:</label> 
 
    <form name="form2"> 
 
    <input type="text" name="input2" value=""> 
 
    </form> 
 
</div>