WordPressの質問（q10207678）の続

質問

空白改行の文字が連続してはいけないという条件で正規表現を調べたところ、空白には色々な表現があるようでそれらを 1 つ 1 つ調べ上げるのは面倒なので、Unicode 文字プロパティを使ったほうがよいと参考サイトに書かれておりました。

マルチバイト対応の文字列に対する正規表現マッチングで作成するのが良いみたいですが、コードを調べても意味が分からずどうすれば良いか迷っております…
正規表現を使っている場合 ReDoS という攻撃があるようで、セキュリティ上の対策も必要なようです。
アドバイスお願い致します。

※参考サイト
https://qiita.com/fallout/items/a13cebb07015d421fde3

回答No.32

dell_OK · ベストアンサー

・カメラ画像をファイルアップロード時に非表示にするコードを追加するコードを考えてみたのですが、間違っているところはありますでしょうか？

実装してみました。
カメラ画像は非表示になったのでいいと思います。

お礼

こちらが最新の質問になります。
質問の期限が切れており続きの質問を立てさせていただきました。アドバイスよろしくお願い致します。

https://okwave.jp/qa/q10226736.html

補足

回答ありがとうございます。
CSSを確認ページまで設定して確認後に表示ページのコードを作成する予定です。

回答No.31

dell_OK

・画面還移ありの掲示板の際に設定していた HTML クラスを追加したところ非同期通信に失敗してしまい確認画面に切り替わらず悩んでおります…
原因は分かりますでしょうか？

非同期通信には失敗していません。

原因はdivタグがなくなったために正しく表示されなくなったのです。
pタグは追加するようにお願いしました。
divタグをpタグに変更ではありません。
－－－－
div = document.createElement("div");
child = document.createElement("p");
child.appendChild(document.createTextNode("名前：" + namae_value));
－－－－

補足

A.回答ありがとうございます。
勘違いしておりました。申し訳ありません修正いたしました。

※最新コード
https://wandbox.org/permlink/2vH15Es2AdKpj4sk

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

カメラ画像をファイルアップロード時に非表示にするコードを追加するコードを考えてみたのですが、間違っているところはありますでしょうか？
まるまるコピーせずに旧コードと新コードを組み合わせてみました。

bbs_quest_input.php が旧コード、sin_bbs_quest_input.php が現在のコード、sample.php が複合させて考えたコードになります。

※該当コード
https://wandbox.org/permlink/syCgajyPo0NwTEoI

※画面還移あり掲示板
https://wandbox.org/permlink/cfzsJgBFcYrcIDI1

回答No.30

dell_OK

・functions.php 右側に追加されている掲示板承認のコードは必要になるのでしょうか？

管理者画面にメニューを表示して機能を追加するコードです。
今のところ無視してください。

回答No.29

dell_OK

・1.confirm_area の子要素として <h2> があるのはなぜでしょうか？

それは「確認画面」を表示するためのタグです。

・2.<h2></h2> の前後についている <div></div> はどの Javascript コードから付与されているのでしょうか？

そのdivは名前とコメントのそれぞれの枠ですが、階層のあやまりで<div></div>となったです。
回答No.28で階層がおかしくならないようpタグを追加したものでは問題なく、以下のように出力されます。
※画像があるとわかりにくくなるので、画像なしで確認画面に進んだものです。
～～～～
<div id="confirm_area" style="display: block;">
<h2>確認画面</h2>
<div>
<p>名前：なまえ</p>
</div>
<div>
<p>コメント：こめんと</p>
</div>
<div><input type="radio" name="stamp" id="confirm_stamp" value="1"><label for="confirm_stamp"></label></div>
<div></div>
<div><button type="button">入力画面へ戻る</button><button type="button" name="sample1">結果画面へ進む</button></div>
</div>
～～～～

・3.スタンプが2番目に表示されているのですが、～
.appendChild は後述したコードから先に出力されるのでしょうか？

２番目の意味がわかりませんが、pタグの生成がないことがすべての原因です。

ところで私のサンプルサイトにはアクセスできたのですね。
添付されたＨＴＭＬはいつのものかわかりませんが、pタグを追加した版でもう一度確認してみてください。

補足

Q.それは「確認画面」を表示するためのタグです。

A.回答ありがとうございます、理解出来ました。

Q.そのdivは名前とコメントのそれぞれの枠ですが、階層のあやまりで<div></div>となったです。
回答No.28で階層がおかしくならないようpタグを追加したものでは問題なく、以下のように出力されます。
※画像があるとわかりにくくなるので、画像なしで確認画面に進んだものです。

A.解説ありがとうございます。修正いたしました。
https://wandbox.org/permlink/ker8utI0DuOs9M9X

Q.ところで私のサンプルサイトにはアクセスできたのですね。
添付されたＨＴＭＬはいつのものかわかりませんが、pタグを追加した版でもう一度確認してみてください。

A.回答ありがとうございます、サンプルサイトにアクセス出来ました。

dell_okさんに頂いたコードから不明なコードがあるのですが、 functions.php 右側に追加されている掲示板承認のコードは必要になるのでしょうか？

※コード比較
https://difff.jp/gjv9n.html

画面還移ありの掲示板の際に設定していた HTML クラスを追加したところ非同期通信に失敗してしまい確認画面に切り替わらず悩んでおります…
原因は分かりますでしょうか？

※最新コード
https://wandbox.org/permlink/ker8utI0DuOs9M9X

※質問掲示板
https://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/

回答No.28

dell_OK

・構造を理解するためにフロートチャートを作っているのですが途中で分からないところが多数出てきており

フローチャートを見ました。
どんどん階層の中へ追加されていますね。

原因は、コードが戻っているか、お願いしたことが反映されていないためです。
質問者さまが、確認画面に表示する名前やコメントをpタグにしたい、と言われていたことです。

確認画面と結果画面の両方にあるので、pタグを作るコードを追加しておいてください。
－－－－
child = document.createElement("p");
child.appendChild(document.createTextNode("名前：" + namae_value));
省略
child = document.createElement("p");
child.appendChild(document.createTextNode("コメント：" + message_value));
－－－－

補足

修正ありがとうございます。
コードについて改めて考えてみたのですがどうしても分からない点があり dell_ok さんに教えて頂きたいです。
サンプルサイトから確認画面をデロッパツールで解析してみたところ下記のように表示されました。

※確認画面HTML
<div id="confirm_area" style="display: block;"><div></div><div><h2>確認画面名前：名前テストコメント：コメントテスト</h2></div><div><input type="radio" name="stamp" id="confirm_stamp" value="1"><label for="confirm_stamp"></label></div><div><img src="blob:http://oksample.starfree.jp/624a1f30-d826-4a68-af5e-53279219a1ea" style="max-height: 200px; max-width: 200px;"><img src="blob:http://oksample.starfree.jp/6c1bf17e-bdd3-44b6-bb84-3e64d91fcfa8" style="max-height: 200px; max-width: 200px;"><img src="blob:http://oksample.starfree.jp/c4689b70-b8e5-4929-9971-f483017d1a72" style="max-height: 200px; max-width: 200px;"></div><div><button type="button">入力画面へ戻る</button><button type="button" name="sample1">結果画面へ進む</button></div></div>
<div></div>
<div><h2>確認画面名前：名前テストコメント：コメントテスト</h2></div>
<div><input type="radio" name="stamp" id="confirm_stamp" value="1"><label for="confirm_stamp"></label></div>
<div><img src="blob:http://oksample.starfree.jp/624a1f30-d826-4a68-af5e-53279219a1ea" style="max-height: 200px; max-width: 200px;"><img src="blob:http://oksample.starfree.jp/6c1bf17e-bdd3-44b6-bb84-3e64d91fcfa8" style="max-height: 200px; max-width: 200px;"><img src="blob:http://oksample.starfree.jp/c4689b70-b8e5-4929-9971-f483017d1a72" style="max-height: 200px; max-width: 200px;"></div>
<div><button type="button">入力画面へ戻る</button><button type="button" name="sample1">結果画面へ進む</button></div>
<div id="confirm_area" style="display: block;"><div></div><div><h2>確認画面名前：名前テストコメント：コメントテスト</h2></div><div><input type="radio" name="stamp" id="confirm_stamp" value="1"><label for="confirm_stamp"></label></div><div><img src="blob:http://oksample.starfree.jp/624a1f30-d826-4a68-af5e-53279219a1ea" style="max-height: 200px; max-width: 200px;"><img src="blob:http://oksample.starfree.jp/6c1bf17e-bdd3-44b6-bb84-3e64d91fcfa8" style="max-height: 200px; max-width: 200px;"><img src="blob:http://oksample.starfree.jp/c4689b70-b8e5-4929-9971-f483017d1a72" style="max-height: 200px; max-width: 200px;"></div><div><button type="button">入力画面へ戻る</button><button type="button" name="sample1">結果画面へ進む</button></div></div>

※お聞きしたい質問
1.confirm_area の子要素として <h2> があるのはなぜでしょうか？Javascriptでは child = となっているため confirm_area の子要素として表示されているのが不思議です。
confirm_area.textContent = '';
var div;
var child;
child = document.createElement("h2");

※該当コード
<div id="confirm_area" style="display: block;"><h2>確認画面名前：名前テストコメント：コメントテスト</h2>

2.<h2></h2> の前後についている <div></div> はどの Javascript コードから付与されているのでしょうか？SEOを考える場合必要ないものだと考えております。
<div></div><div><h2>略</h2></div><div>

※該当コード
<div></div><div><h2>確認画面名前：名前テストコメント：コメントテスト</h2></div><div>

3.スタンプが2番目に表示されているのですが、Javascript では確認画面の下に名前に関するコードが書かれているため勘違いしていたようです…
.appendChild は後述したコードから先に出力されるのでしょうか？
confirm_area.appendChild(child);// confirm_area の末尾に child を追加
div = document.createElement("div");
child.appendChild(document.createTextNode("名前：" + namae_value));

※該当コード
<input type="radio" name="stamp" id="confirm_stamp" value="1">

回答No.27

dell_OK

・〇〇.appendChild(××) は「要素〇〇の子要素として××を追加する」というメソッドでしょうか？

そうです。

回答No.26

dell_OK

・残りの文字チェックコードを考えてみたのですが、/* 最小チェック */と/* 最大チェック */から計算しているのではないかと思い、現在の文字列チェックコードはすべて書き換える必要があるように感じました。

抜き出されているところでよさそうです。
それを転記してください。
idが違うところがあるので手直しする必要があります。
あとは、名前とコメントのＨＴＭＬを文字数チェックに合わせてdiv階層を増やしたりclassを追加する必要もあります。

必要最低限ですが、質問者さまのsingle-input.phpをもとに、私のサンプルを直してみましたので確認してみてください。
http://oksample.starfree.jp/%E8%B3%AA%E5%95%8F%E3%81%99%E3%82%8B/
https://github.com/dell-GH/sample_theme

「確認画面へ進む」ボタンの制御が必要かどうかわかりませんが、必要であればスタンプが選択されているかどうかもチェックした方がいいと思います。

補足

A.アドバイスありがとうございます。
サンプルサイトの URL を確認してみたのですが、下記のように表示されており表示することが出来ませんでした…
無効なURLです。
プログラム設定の反映待ちである可能性があります。
しばらく時間をおいて再度アクセスをお試しください。

構造を理解するためにフロートチャートを作っているのですが途中で分からないところが多数出てきており、コードの修正に影響が出るのではないかと考えております。
〇〇.appendChild(××) は「要素〇〇の子要素として××を追加する」というメソッドでしょうか？ HTML コードを教えて頂きたいです。

※single-index.phpの152、156行目
confirm_area.appendChild(div);// confirm_area の末尾に div を追加
confirm_area.appendChild(div);// confirm_area の末尾に div を追加

※single-index.phpの164行目
div.appendChild(child);// div の末尾に child を追加

※最新コード
https://wandbox.org/permlink/Bwo6ztTvtfmnBK2d

※フロートチャート
https://imgur.com/zZP8k2Y.jpg

回答No.25

dell_OK

また、コードがもとに戻っています。
変更しておいてください。
－－－－
namae_value = document.getElementById("namae").value;
message_value = document.getElementById("message").value;
－－－－
namae_value = json.namae;
message_value = json.message;
－－－－

補足

回答ありがとうございます、申し訳ありません…
修正いたしました。

回答No.24

dell_OK

・残りの文字数表示部分はこれ以上改善することが出来ず、変更をせずにそのまま移動させたいのですが、下記送信ボタン制御コードにどのように追加すればよいか分からず悩んでおります…

残りの文字数表示部分のコードがどこからどこまでかわかりますか。
まずはそれをそのまま移動してみてください。
init()の中のものはinit()の中へ、外のものは外へ。

補足

回答ありがとうございます、残りの文字チェックコードを考えてみたのですが、/* 最小チェック */と/* 最大チェック */から計算しているのではないかと思い、現在の文字列チェックコードはすべて書き換える必要があるように感じました。
文字数のチェックはどうすれば良いでしょうか？

※文字数表示部分のコード
function validation_submit(f) {
const submit = document.getElementById("submit_button");
/* 判定は逆なので、逆に渡す */
submit.disabled = f ? false : true;
};
function validation_text(parts) {
/* このpartsグループの、inputを抽出 */
let text = parts.getElementsByClassName('input')[0];
/* 最小チェック */
if (text.value.length == 0) {
return false;
}
/* 最大チェック */
if (text.value.length >= text.dataset.length) {
return false;
}
return true;
};

（略）

/* 文字数表示 */
document.addEventListener('input', e => {
if (!['name', 'message'].includes(e.target.id)) return;
const
t = e.target,
m = t.nextElementSibling,
n = t.value.length - (t.dataset.length | 0),
c = document.createElement('span');
c.append(Math.abs(n));
m.style.color = n > 0 ? 'red' : 'black';
m.replaceChildren(n > 0 ? '' : '残り', c,
`文字${n > 0 ? '超過してい' : '入力でき'}ます。`);
/* 毎回判定によるボタン制御 */
validation();
});
/* 初回判定のボタン制御 */
validation();
};
document.addEventListener("DOMContentLoaded", init);

※最新コード
https://wandbox.org/permlink/8hG7Gno9SvFYGrXP

回答No.23

dell_OK

・sin_functions.phpのコードを削除して旧コードのような形に変更することは可能だと思われますでしょうか？

どのようにされたいのかがわかりませんが、
sin_functions.phpとfunctions.phpで重複する機能関数や定義は、
優先すべきものをsin_functions.phpからfunctions.phpへ上書きして、
functions.phpにないものは移動したらいいと思います。
もともとsin_functions.phpを作られた意図がわからなかったのですが、
非同期用の関数をfunctions.phpに書いていただければよかったような気もします。
そもそもどうやってsin_functions.phpを読み込んでいたのでしょうか。

お礼

こちらが最新の質問になります。旧コード single-input.php のJavascript コードをそのまま最新コード single-index.php に合体させることは可能でしょうか？
残りの文字数表示部分はこれ以上改善することが出来ず、変更をせずにそのまま移動させたいのですが、下記送信ボタン制御コードにどのように追加すればよいか分からず悩んでおります…

const init = function () {
set_attach_event();
document.getElementById("input_button").addEventListener("click", input_button_click);
}

※最新コード
https://wandbox.org/permlink/8hG7Gno9SvFYGrXP

※旧コード
https://wandbox.org/permlink/cfzsJgBFcYrcIDI1

補足

Q.sin_functions.phpとfunctions.phpで重複する機能関数や定義は、
優先すべきものをsin_functions.phpからfunctions.phpへ上書きして、
functions.phpにないものは移動したらいいと思います。

A.回答ありがとうございます、申し訳ありませんsin_functions.phpはfunctions.phpへの追加分との比較のために書いていたので、functions.phpに戻しておきます。

回答No.22

dell_OK

・カメラ画像をファイルアップロード時に非表示にするコードを現在の single-index.php から探してみたのですが見当たらず、書いていないのではないかと不安なのですが、該当するコードはありますでしょうか？

そのコードはありません。
サンプルではカメラ画像の表示および切替をしていません。
以前のコードを参照して、現在のコードに反映してみてください。
まるまるコピーしてもうまくいかないかも知れませんので、
気を付けてください。

補足

回答ありがとうございます、旧コードと見比べてみたところ恐らく名前が空だった場合のエラー表示、入力時の字数カウント、カメラ画像をファイルアップロード時に非表示にするコードの3つを追加する必要がありそうなのですが、sin_functions.phpのコードを削除して旧コードのような形に変更することは可能だと思われますでしょうか？

class MAX_LENGTH
{
public const NAME = 50;
public const MESSAGE = 500;
}

※最新コード
https://wandbox.org/permlink/lItJX4RPyB5Ytp9F

※旧コード
https://wandbox.org/permlink/cfzsJgBFcYrcIDI1