[javascript][PHP] MySQLよりjsonで半角英数字を出力した際に、カンマが文字コードになってしまう。

下記のコードは、画面に表示された「I'm fine.」という文字列に対応するキーコードを変数listにある配列より取得し、文字列のはじめより、キーボートからの入力と一文字ずつ一致させて、一致した場合は、「*」に変換して、次の文字に進んでいくというものです。

表示する文字列「I'm fine.」は、var words = [{w:"I'm fine."}] のように変数wordsに定義しています。このようにjavascriptだけで書く場合は、問題なく実行できます。

一方で、問題なのは、変数wordsに、phpで表示したものを代入する場合です。
var words = <?php echo json_encode($word); ?>のように、jsonでMySQLより取得したデータを出力した場合です。この場合は、画面表示には、「I'm fine.」と表示され一見問題なく見えますが、F12でコードを確認すると、変数wordsの部分は、var words = [{"w":"I'm fine."}]; 出力され、文字列の「'」部分が文字コードの「'」で出力されます。この場合、外部のキーボード入力は、「'」キーではなく「&」「#」「0」「3」「9」「;」のキーに反応するので、「'」キーだけで一致させるようにしたいと思います。

この場合どのような解決方法が考えられますでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <style> body { text-align: center; } #w {font-size: 35px; letter-spacing: 3px;}</style>
</head>
<body>

<p id="w"></p>

<script>
(function() {
'use strict';

var list =
[
{	key: '73', value: 'I', shift: true},
{	key: '55', value: '\'', shift: true},
{	key: '77', value: 'm', shift: false},
{	key: '32', value: ' ', shift: false},
{	key: '70', value: 'f', shift: false},
{	key: '73', value: 'i', shift: false},
{	key: '78', value: 'n', shift: false},
{	key: '69', value: 'e', shift: false},
{	key: '190', value: '.', shift: false},
{	key: '54', value: '&', shift: true},
{	key: '51', value: '#', shift: true},
{	key: '48', value: '0', shift: false},
{	key: '51', value: '3', shift: false},
{	key: '57', value: '9', shift: false},
{	key: '187', value: ';', shift: false}
]

//var words = [{w:"I'm fine."}];   //javascript こっちは正常に実行できます。
var words = [{"w":"I&#039;m fine."}];  //phpよりjsonで出力したもの カンマが文字コードになってしまうので、キーボードより入力した際に、不具合が生じます。


    var num = words.length;
    var currentWord;
    var currentLocation;
    var w = document.getElementById('w');
    var isStarted;
    var listLength = list.length;
    var listValue;
    var currentShift;
    var wordsShift;
    var shift;

//*Convert words[] to keyCode

    var words_key = [];
    var key_num = 0;

    for (var x = 0; x < words.length; x++) { 
      for (var y = 0; y < words[x].w.length; y ++){
        for (var j = 0; j < listLength; j++) {
          if(list[j].value == words[x].w[y]){
            words_key[key_num] = list[j].key;
            key_num++
          }
        }
      }
    }

//初期画面
    function init() {
      currentWord = 'Start';
      currentLocation = 0;
      w.innerHTML = currentWord;
      isStarted = false;
    }

    init();

//実行
    window.addEventListener('keyup', function() {
      if (!isStarted) {
        isStarted = true;
        currentWord = words[0].w;
        w.innerHTML = currentWord;
      }
    });

//判定
    window.addEventListener('keydown', function(e) {
      if (!isStarted) {
        return;
      }

      for (var j = 0; j < listLength; j++) {
          if(list[j].value == currentWord[currentLocation]){
          currentShift = list[j].shift;
         }
      }

      wordsShift=false;
      shift = e.shiftKey;

      for (var j = 0; j < listLength; j++) {
          if(list[j].key == e.keyCode && list[j].shift == shift){
          listValue = list[j].value;
          wordsShift=list[j].shift;
         }
      }

      if (listValue == currentWord[currentLocation]){
        currentLocation++;

      var placeholder = '';
      for (var i = 0; i < currentLocation; i++) {
        placeholder += '*';
      }
        
      w.innerHTML = placeholder + currentWord.substring(currentLocation);

    }
  });

})();
</script>


</body>
</html>

行動規範の内容に同意します

回答2件

ベストアンサー

MySQL内のデーターの「'」が既にHTMLエンコードされて格納されていることが原因かと思います。
仮に$wordがPHPフレームワークを使用してViewのHTMLエンコードがデフォルトになっている場合は別です。

試しに下記のようにすれば、「'」はエンコードされずにJson文字列が出力されると思います。

php
1var words = <?php echo json_encode(["w" => "I'm file."]); ?>;

従って下記のように、$wordのPHP連想配列のHTMLエンコードをデコードしてから表示すればうまく出力されます。

php
1var words = <?php
2    array_walk_recursive($word, function(&$value, $key) {
3        $value = html_entity_decode($value, ENT_QUOTES, 'UTF-8');
4    });
5
6    //日本語をユニコードエスケープしない
7    echo json_encode($word, JSON_UNESCAPED_UNICODE);
8?>;

投稿2017/09/12 12:58

Tomak

総合スコア1652

xjaPANDA

2017/09/12 14:08

ありがとうございます。html_entity_decode()を使ったことがなかったので、とても勉強になりました。

行動規範の内容に同意します

こうでは。

PHP
1var words = JSON.parse( '<?php echo json_encode($word); ?>' );

【JSON.parse() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

投稿2017/09/12 11:50

kei344

総合スコア69430

xjaPANDA

2017/09/12 14:05

ありがとうございます。とても勉強になります。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

[javascript][PHP] MySQLよりjsonで半角英数字を出力した際に、カンマが文字コードになってしまう。

関連した質問