質問編集履歴

2 説明追加 xjaPANDA score 118 2017/09/12 20:49 投稿

[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>

<head>

</head>

<body>

(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'm fine."}]; //phpよりjsonで出力したもの

var words = [{"w":"I'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>

```

PHP

27321 questions

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

24270 questions

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

MySQL

8060 questions

MySQL（マイエスキューエル）は、TCX DataKonsultAB社などが開発するRDBMS（リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

jQuery

9493 questions

jQueryは、JavaScriptライブラリのひとつです。簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 説明の追加 xjaPANDA score 118 2017/09/12 20:47 投稿

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

一方で、問題なのは、変数wordsに、phpで表示したものを代入する場合です。

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

```ここに言語を入力

<!DOCTYPE html>

<head>

</head>

<body>

(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'm fine."}]; //javascript　こっちは正常に実行できます。

var words = [{"w":"I'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>

```

PHP

27321 questions

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

24270 questions

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

MySQL

8060 questions

MySQL（マイエスキューエル）は、TCX DataKonsultAB社などが開発するRDBMS（リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

jQuery

9493 questions

jQueryは、JavaScriptライブラリのひとつです。簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

質問編集履歴

teratailアカウントでログイン

SNSアカウントでログイン