JavaScript 部分一致したものを抽出したい。

Question

前提・実現したいこと

テキストボックス（検索条件）を入力して，検索ボタンをクリックした際に，部分一致したものを全て表示したいと考えています。

現状データとしてA1,A12,A123,A1234,A123B,A123BCのようなものがあるとして，テキストボックスにAを入力した際にAを含むものすべてを取り出したいのですが，なぜかAだけが，データの個数分取り出されてしまいます。

data詳細は表に出すのは難しいため概要だけとなりますが，本質的に重要なのは，通し番号（A1,A12,A123,A1234,A123B,A123BC）で，1つの番号には60～70の情報があります。

"use strict";
  let mainData = new Array();
  let csv = "";

  $(function() {//page load
    $.get("data.csv", function(data) {
      csv = $.csv.toArrays(data);
      for(let i = 0; i < csv.length; i++){
        mainData.push(csv[i]);
      }
      $(".searchCondition").show();
      btnbody.append("<input type = 'button' id = 'btn' onclick = 'searchbtn()' value ='検索'>");
    });
  });

  function searchbtn(ary2) {//検索btn click process
    $("#btn").prop("disabled", true);
    let num = $("#num").val();//text id get process
    let targetData = new Array();

  for(let i = 0; i < 30; i++){//mainData[i][0]が通し番号
    if(num !== "" && mainData[i][0].indexOf(num) > -1){
      csvbody1.append("<tr><td><a href='#' onclick='linkClick(\"" + mainData[i][0] + "\")'>" + mainData[i][0].match(num) + "</a></td></tr>");
  }

Comments

[Lhankor_Mhy]

typoがあります。
function searchbtn(ary2) {
と
for(let i = 0; i < 30; i++){
が閉じてないです。

[Lhankor_Mhy]

ご提示のコードでは csvbody1 が宣言されていませんが、実際には何が入っていますか？

[yasutomi]

このコードでは"use strict";ならエラーになります。
エラーにならないコードの記載をお願いします。

[Lhankor_Mhy]

$.csv.toArrays はなにかのプラグインを使っているのでしょうか？
そうであれば、そのドキュメントをご提示ください。

Answer 1

mainData[i][0]だと抽出した結果の一文字目になってませんか？
mainData[i]が正解ともいます。

スマホで斜め読みしただけなので、違ってたらごめんなさい。

Answer 2

matchは基本的に「一致した部分を返す」機能ですので、検索文字以外の部分も欲しい場合には正規表現で一致範囲を文字列全体に広げるか
一致した文字があるデータをそのまま出力するのであれば、単純に一致したものがあるかどうかをチェックしif文でマッチした場合だけ出力するようにすればよいと思います。

今回のソースはちょっと環境が明確でないのと、実際にはどういうデータが入っていて、どういう風に表示したいのかのモデルケースもないので予想で書いてみますが、

if(num !== "" && mainData[i][0].indexOf(num) > -1)

ここですでにindexOfを使ってマッチしているかどうかを判断しているので、

if(num !== "" && mainData[i][0].indexOf(num) > -1){
    csvbody1.append("<tr><td><a href='#' onclick='linkClick(\"" + mainData[i][0] + "\")'>" + mainData[i][0] + "</a></td></tr>");
}

という出力ではだめですかね。

Comments

[3hawks25]

私の認識不足でした。
予定通りの動作をしました。
ありがとうございました。