JavaScriptでの「:」や「.」といった文字のエスケープについて

Question

行いたい事

Pythonを使用してWebアプリケーションの制作。
その際にAjaxを利用してDBから取得したデータを表示し、
HTML側の入力欄で入力された文字が入っているデータだけを画面を遷移させずに表示する（絞り込み機能）

困っている事

: や . など文字が入っている際にJavaScript側でエラーを吐いてしまう。
恐らく: や . などの文字の前にバックスラッシュでエスケープを行えばエラーは出なくなると思うのですが、if文などが長く続いてしまいそうなため もっといい方法は無いか困っています。

# 日本語が文字化けしないように、Falseにしておく。
app.config['JSON_AS_ASCII'] = False
@app.route('/spec_get')
def spec_get():
    spec_data = db.game_spec_get()

    spec_list = []
    for i in range(len(spec_data)):
        # specに辞書型で格納する。
        spec = {
            'id': spec_data[i][0],
            'name': spec_data[i][6]
        }
        spec_list.append(spec)

    # JSONで返す。　
    return jsonify(ResultSet=json.dumps(spec_list))

function game_spec_get() {

    let list_data = document.getElementById('gTable');
    let child_data = list_data.rows.length;

    if (child_data <= 1) {
        $(document).ajaxSend(function() {
            $("#overlay").fadeIn(200);
        });
        $.ajax({
            type: 'GET',
            url: '/spec_get',
            data: '',
            contentType: 'json',
            success: function (data) {
                parsed = JSON.parse(data['ResultSet']);
                console.log(data['ResultSet']);
            }

        }).done(function() {
            setTimeout(function() {
            $("#overlay").fadeOut(0);
            },0);
            let tabObj = document.getElementById('Table');
            for (let i in parsed) {
                // trタグを追加
                let newRow = tabObj.insertRow();
                let newCell = newRow.insertCell();
                let newText = document.createTextNode(parsed[i]['name']);
                newCell.appendChild(newText);
                newRow.classList.add('title_target');

                newCell = newRow.insertCell();
                newText = document.createTextNode("○");
                newCell.appendChild(newText);
            }
        }
    )}
}

$(function () {
    gameSearchWord = function(){
      let gameSearchText = $(this).val(), // 検索ボックスに入力された値
          gameTargetText;
  
      $('.title_target').each(function() {
        gameTargetText = $(this).text();
  
        // 検索対象となるリストに入力された文字列が存在するかどうかを判断
        if (gameTargetText.indexOf(gameSearchText) != -1) {
          $(this).removeClass('hidden');
          $('#'+gameTargetText).removeClass('hidden');
        } else {
          $(this).addClass('hidden');
          $('#'+gameTargetText).addClass('hidden');
        }
      });
    };
  
    // searchWordの実行
    $('#game_search').on('input', gameSearchWord);
  });

Uncaught Error: Syntax error, unrecognized expression: #gamename: gamename
(ここのgamenameはゲーム名に:などが含まれている物です。)

Comments

[arcxor]

> その際にAjaxを利用してDBから取得したデータを表示
> : や . など文字が入っている際にJavaScript側でエラーを吐いてしまう。

具体的なコードの断片を提示していただけませんか？

この説明だけではなぜエラーが出るのか全く分からず、もっといい方法を考えることができませんでした。

[yambejp]

＞Ajaxを利用して

具体的にどうやっていますか？fetchじゃだめですか？

> : や . など文字が入っている際にJavaScript側でエラーを吐いてしまう。

基本的にはそんなことはありませんが、json型で受け取る場合は方が一致しないエラーになるかもしれません。その場合はサーバー側でただしいjsonを吐き出す必要があります

[int32_t]

JSONでキー名に : や . が入るって状況ですかね?

[int32_t]

> Uncaught Error: Syntax error, unrecognized expression: #gamename: gamename

このエラーはどの行で起きるのですか? JSON.parse()?
その行の入力データはどうなってますか?

[tamo823]

game_get.js:78:11 なので、HTMLのinput textに文字を入力した際に :の影響でエラーが起きる感じです。

ajaxのデータ自体は取得出来ているのですが、game1~10までデータがあったとして、game4の名前に:などが入っているとその先のgame4~10のデータにhidden属性を付ける事が出来ないっていう状況です

Answer 1

        if (gameTargetText.indexOf(gameSearchText) != -1) {
          $(this).removeClass('hidden');
          $('#'+gameTargetText).removeClass('hidden');
        } else {
          $(this).addClass('hidden');
          $('#'+gameTargetText).addClass('hidden');
        }

gameTargetText の値によっては、CSS セレクタの文法違反になるのでエラーになりますね。
$('#' + CSS.escape(gameTargetText)) のようにエスケープしたり、jQueryやめて document.getElementById(gameTargetText).hidden = false; などにしましょう。

Comments

[tamo823]

無事解決することが出来ました。ありがとうございます！

JavaScript側でのエスケープを行わないといけないとばかり考えていたので、CSSセレクタの構文エラーの解決法としてCSS.escapeという手段がある事を知りませんでした。

もっと綺麗にコードを書けるように精進したいと思います。

Answer 2

contentType: 'json',

dataTypeの間違いでは？

$(function(){
  $.ajax({
  url:'/spec_get',
  data:{a:1,b:2},//dummyなのでなくてもOK
  dataType:'json',
  }).done(function(data){
    console.log(data);
  }).fail(function(xhr,err){
    console.log(err);
  });
});

$.ajaxでやるならsuccessは古い構文なのでNG、doneでうけてdataを参照、但しエラーの場合はfailに流れます。
エラー情報をみて適正な対応をしてください
（たとえばparsererrorだったりしたらdataTypeをtextに変えて戻り値を確認するとか）

なお、fetchでやるならこう

fetch('/spec_get')
     .then(res=>res.json())
     .then(console.log)
     .catch(console.error);

Comments

[tamo823]

ajax自体ではエラーが吐いてなくて、HTMLのinput textの部分に文字を入力して一部のデータにhidden属性を付けようとしたときに、エラー吐いてしまうって感じになってます。

fetchの書き方は全く知らなかったので参考になりました。 ありがとうございます。