Javascript 文字の入れ替え

Javascriptで文字の入れ替えのコードの紹介をしようと思います 。

プログラムの内容
HTMLのコード
Javascript
結果

プログラムの内容

XXという文字を入れ替えるというプログラムを作成します。

今日はXXだ。

一つの入力ボックスを作って、その入力された文字に変更するようにします。

HTMLのコード

  <body>
    <label for="replace-letter">代入する文字</label>
    <input type="text" id="replace-letter" />
    <br />
    <br />
    <label for="input-text">入れ替えする文章</label>
    <textarea id="input-text" rows="4" cols="50">今日はXXだ。</textarea>
    <br />
    <br />
    <button onclick="replaceText()">実行</button>
    <br />
    <br />
    <label for="output-text">結果</label>
    <textarea id="output-text" rows="4" cols="50"></textarea>
  </body>
  <script src="replace-text.js"></script>

Javascript

Javascriptのコードは下記になります。

function replaceText() {
     const replaceLetter = document.getElementById("replace-letter").value;

    const inputText = document.getElementById("input-text").value;

    const outputText = inputText.replaceAll("XX", replaceLetter);

    document.getElementById("output-text").value = outputText;

結果

以下のページが作成されます。

JavaScript コードレシピ集

技術評論社

JavaScriptによるWeb開発のための、究極のレシピ集が登場。制作の現場で使われる定番テクニックからプロ技まで余すところなく集めました。基本文法/文字や数値の取り扱い/データの取り扱い/ブラウザーの操作/ユーザーアクション/HTML要素の操作/アニメーション/画像、音声、動画/スマートフォンのセンサーなど、目的別にレシピを整理