javascriptでの記号を含む文字列の検索

Question

初めまして。

現在jsにて記号（・ ー スペース）を含む文字列を検索するロジックを
実装しようとしているのですが上手くいかず、皆様はこんな検索の時どんな
方法を用いているのかお知恵をお借りしたく質問させて頂きました。

現在の実装ではindexofを使って検索しようとしているのですが、
上記の記号が含まれている文字列は検索できない状況です。

何卒お力添えのほど宜しくお願い致します。

////////////////////////////////////////////////////

※上記勘違いしておりました。
実際は以下の様にJQueryのセレクタで上記記号を含むidを
指定しようとした場合にヒットしないという状況でした。
この場合どの様にすればヒットするのでしょうか。

<tr id="test 1"></tr>
<tr id="test_1"></tr>
<tr id="test.1"></tr>

$("tr:has(#" + test 1 + ")").show();
$("tr:has(#" + test_1 + ")").show();
$("tr:has(#" + test.1 + ")").show();

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[wolf2]

ご返信有難う御座います。

何がどのようにかは書いてあります通りindexofを使っても記号を含む文字列が検索できない、コードのどの部分で詰まっているかもそれに紐付いておりますが記号を含む文字列がindexofを使っての実装では実現出来ないのでそれ以外の方法はあるかと書いてあります。

Answer 1

下記コードを試しましたが、普通に検索できました。

const str = "この文字列は「・」と「ー」と「 」(スペース)を含みます。";
console.log(str.indexOf("・"));
console.log(str.indexOf("ー"));
console.log(str.indexOf(" "));

paiza.ioでの実行結果

うまくいかないというのであれば、特定のコード、特定の環境(ブラウザ)でのみ発生している可能性があります。その場合は、実際のコードや試した環境などを示して貰わない限り、誰も解決策を示すことはできません。

Comments

[wolf2]

ご返信有難う御座います。
すいません、コードについて勘違いしておりまして
indexof部分はちゃんと動いておりました。
ただ、本文を編集致しますがJQueryで上記記号を含むIDをセレクタで
指定した場合にヒットしないという状況でした。
申し訳ございません。

Answer 2

indexOf を使うこともあるし、match を使うこともあります。検索結果をどう使うのかであったり、検索文字列をどう扱うかによって使い分けます。

---

<tr id="test 1"></tr> // ダメ文法違反
<tr id="test_1"></tr> // OK
<tr id="test.1"></tr> // 一応OK

$("tr#test_1").show();
$("tr#test.1").show();

Comments

[wolf2]

ご返信有難う御座います。
すいません、コードについて勘違いしておりまして
indexof部分はちゃんと動いておりました。
ただ、本文を編集致しますがJQueryで上記記号を含むIDをセレクタで
指定した場合にヒットしないという状況でした。
申し訳ございません。

[退会済みユーザー]

提示されたコードは、HTMLの文法に違反しています。

Answer 3

例を用いて試したら、下記のような結果になりました。

	<div id="test_space a">1</div>
	<div id="test_space">2<a>3</a></div>
	<div id="test_dot.a">4</div>
	<div id="test_dot" class="a">5</div>

$(function(){
	console.log($('#test_space a').text());// 3
	console.log($('div[id="test_space a"]').text());// 1（取得できてしまった…）
	console.log($('#test_dot.a').text());// 5
	console.log($('div[id="test_dot.a"]').text());// 4
})

半角の場合は、子要素を検索する。
ドットがあると、クラスとして判定する。
一応取得出来る書き方はある（ドットについてはw3.orgでもOKらしい）が、クラスと混在するため、あまり使用しない方がいいと思います。
タグの文字列で取得すれば、スペースの時も取得出来てしまいましたが、本来の用途としてはNGですね。

Answer 4

HTML5において idに空白文字は使えません。

【[HTML, CSS, JavaScript] id名/class名に使用できる文字の種類 · GitHub】
https://gist.github.com/think49/d8fbcf7f1c743e21bc79bb7d16178cad

HTML Living Standard (通称 HTML 5) ではid属性値、class属性値に対して空白文字を除く全ての文字を使用できます。

---

また、少なくとも文字列として渡さないと取得できないでしょう。

// $("tr:has(#test 1)").show();
   $("tr:has(#test_1)").show(); // 例示のHTMLでは表示されない。（tr自身が#test_1のため）
// $("tr:has(#test.1)").show(); // CSSが「.」をid名として許容しない
```**動くサンプル：**[https://jsfiddle.net/5uwfdkpz/1/](https://jsfiddle.net/5uwfdkpz/1/)

Comments

[wolf2]

HTML5でのidに空白が使えないのは盲点でした…そうなるとロジックをもっと遡ったところから見直さないとダメそうです。ロジック変更の糸口が見えました。有難う御座います。