JavaScriptのindexOfで文字列があるのに「-1」が返ってくる

Question

WordPress5.9の投稿編集画面で文字列検索をしたく

function my_admin_script() {
  echo '<script>
  window.onload = function(){
  var customSource = document.getElementById("content");
  console.log(customSource);
  console.log(String(customSource).indexOf("Point"));
}
  </script>'.PHP_EOL;
}
add_action('admin_print_scripts', 'my_admin_script');

をfunction.phpに記述しています。
投稿編集画面で下書き保存後、
console.logで出力した通り、customSourceに"Point"という文字列が含まれているのに
console.log(String(customSource).indexOf("Point"));
の結果は「-1」となってしまいます。

問題の原因を探すため
indexOf("Point")をindexOf("content")
などに書き換えても結果が同じで、indexOf("Point")の"Point"に投稿画面の文字列をコピー＆ペーストしても結果は同じで困っています。
初心者で変なことをしているのかも知れませんが、解決方法などご教示お願いします。

GoogleChromeDevTool

Comments

[yambejp]

my_admin_script()はPHPのスクリプトという認識ですか？

[greentail]

最初管理画面でJavaScriptが使えなかったので
https://memocarilog.info/wordpress/7570
こちらのサイト「管理画面に独自の CSS・JavaScript を適用させる方法まとめ」を参考に
function.phpに記述しました。

Answer 1

console.log(document.getElementById("content").toString())などとしてみると、原因がわかると思います。innerHTMLなどを使用するのがいいかと思いますよ。

Comments

[greentail]

ありがとうございます。
console.log(customSource.innerHTML.indexOf("Point"));で開始位置が取れました。

Answer 2

textarea内の文字列がとりたいのか、textareaのタグも含めて文字列としたいのかわからないのですが、
Document.getElementById()は id プロパティが指定された文字列に一致する要素を表す Element オブジェクトを返すのでString()したところで、[object HTMLTextAreaElement]のようになるだけで文字列にはなりません。

「textarea内の文字列」ならvalueプロパティを参照してください。

customSource.value

Comments

[greentail]

textarea内の文字列が必要でした。
ご教示頂きましたように
console.log(customSource.value.indexOf("Point"));
としたところ無事4が返ってきました。
ありがとうございました。

[m.ts10806]

解決されたようで何よりです。
質問が受付中になっているので締めておいてください。

※あと質問は編集できますので、指摘あれば都度修正を

[greentail]

いろいろありがとうございます。
２度目の返信遅れてすみません。

Answer 3

解決していますが、今後のためのアドバイスとしては、

JavaScriptのindexOfで文字列があるのに「-1」が返ってくる

というのは考える方向性を間違っています。

console.logで出力した通り、customSourceに"Point"という文字列が含まれているのにconsole.log(String(customSource).indexOf("Point"));の結果は「-1」となってしまいます。

結果が-1なのが確かであれば、String(customSource)に"Point"が含まれていないと言うのが同じだけ確かです。
なので、console.log(String(customSource))してみようという方向に行くのが正しい。

一般化すると、間違えた場合は一歩ずつ確認します。
（customSourceからString(customSource).indexOf("Point")にいきなり行かない）

Comments

[greentail]

なるほど、Stringをつけたのもその場しのぎでいろいろ間違っていました。
ありがとうございます！

[otn]

> Stringをつけたのもその場しのぎ
知らないことを間違うこと自体は問題ないです。上級者でも知らないこと（忘れたこと）を間違うのは普通です。
結果がおかしい時に、どう動くかで初心者とそれ以上に別れます。

[greentail]

ありがとうございます、頑張ります。

Answer 4

console.log(String(customSource).indexOf("Point"));

ちょっと何をしたいかわかりません
DOMをstringに無理やりしている？

String(customSource)は[object HTMLTextAreaElement]とか返ってきてませんか？

 console.log(customSource.innerHTML.indexOf("Point"));

とか？

Comments

[greentail]

最初Stringなしで実行してみたところ
"TypeError: obj.indexOf is not a function"エラー
が出たためエラー文で検索し行きついた先で解決方法として紹介されていたのでつけました。
基本がわかっていなくてすみません・・。