特定の文字列が英語の場合のみにCSSを適用させるためのJavaScriptを教えてください。

質問失礼いたします。

特定の文字列が日本語なのか英語なのかによって、CSSの適用を変化させるJavaScriptを教えていただけないでしょうか。

WordPressのカスタムフィールドで「URL」を入力するテキストエリアを設けており、
デフォルトでは「未入力」と表示されるようになっています。

文字列が「未入力」のときは「pointer-events: none;」を適用させ、
URLが入力されているときは「text-decoration: underline;」を適用させたいです。

ですので、文字列が日本語であれば「pointer-events: none;」を適用させ、
文字列が英語のみであれば「text-decoration: underline;」を適用させるという仕組みを実装したいです。

HTML
1<table>
2<tbody>
3<tr>
4<th>URL</th>
5<td>未入力</td>
6</tr>
7</tbody>
8</table>
9
10<table>
11<tbody>
12<tr>
13<th>URL</th>
14<td>https://sample.com</td>
15</tr>
16</tbody>
17</table>

ご教授の程、何卒よろしくお願いいたします。

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

回答3件

日本語ドメインとかURLに日本語が含まれる可能性もあるので、日本語か英語かで場合分けするという実装はどうかと思います。

また、カスタムフィールドの初期値を「未入力」とするのもあまりいい実装とは思えません。
「未入力」は何も入力されていない状態という意味なので。

カスタムフィールドで初期値を設定しない、文字通り未入力の状態にスタイル付けするのが正解かなと思います。未入力は :empty疑似クラスで判定できます。また「未入力」の表示は疑似要素で表示させます。

:empty - CSS: カスケーディングスタイルシート | MDN

html
1<table>
2<tbody>
3<tr>
4<th>URL</th>
5<td></td>
6</tr>
7</tbody>
8</table>
9
10<table>
11<tbody>
12<tr>
13<th>URL</th>
14<td>https://sample.com</td>
15</tr>
16</tbody>
17</table>

css
1td {
2  text-decoration: underline;
3}
4td:empty {
5  text-decoration: none;
6}
7td:empty::before {
8  content: "未入力";
9  pointer-events: none;
10}