入力した文字からimagesディレクトリにある画像を表示させたいです。

前提・実現したいこと

入力フォームに、「カエルさん」と入力して、送信ボタンを押すと、
imagesディレクトリに、【カエル.jpg】を表示させるようにしたいです。

現在、「カエル」と入力したら、imagesディレクトリにある、【カエル.jpg】が表示されるようになっています。
ここから、例えば「カエルさん」や「日本のカエル」と入力すると、「カエル」という文字列を見つけ、【カエル.jpg】を表示させるようにしたいです。

参考になる資料やアドバイス等ご教授の程よろしくおねがいします。

該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="result-div"></div>
  <input id="target" value="サンタ">
  <input type="button" onclick="search()" value="送信">
  <article id="content_area">
  </article>

  <script>
    function search(){
      const content_area = document.getElementById("content_area");
      const img_element = document.createElement('img');
      content_area.appendChild(img_element);
      const input_message = document.getElementById("target").value;
        // console.log(input_message)
      var array = ["images/", ".jpg"];
      var imageName = document.getElementById( "target" ).value ;
        array.push = imageName
        array = ["images/", imageName ,".jpg"];
        array_result = array.join('')
        console.log(array_result)
        img_element.src = array_result
        img_element.alt = '画像'; // 代替テキスト
        img_element.width = 200; // 横サイズ（px）
        img_element.height = 200; // 縦サイズ（px）
    }
  </script>
</body>
</html>