JavaScript 正規表現

JavaScriptの正規表現でひらがな、漢字、カタカナ、英字を識別し、下線を引きたい

a="あいうえお1質問カキクケコ2aiueoあイうエお";

という変数があったとしましたら、
ひらがな「あいうえお」は赤色のアンダーライン
漢字「質問」は緑色のアンダーライン
カタカナ「カキクケコ」は青色のアンダーライン
英字「aiueo」は黄色のアンダーラインに置換したいのですが、
正規表現で可能でしょうか？

あイうエおなど1文字の場合は除いて、処理を適応させたいと考えております

変数aの例でいうと、
<span style="text-decoration:underline;text-decoration-color:red">あいうえお</a>1<span style="text-decoration:underline;text-decoration-color:green">質問</a><span style="text-decoration:underline;text-decoration-color:blue">カキクケコ</a>2<span style="text-decoration:underline;text-decoration-color:yellow">aiueo</a>あイうエお

という形に置換したいです
宜しくお願い致します

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

回答4件

ひらがな2文字以上
カタカナ2文字以上
漢字2文字以上
アルファベット2文字以上
上記以外すべて

みたいに分割して、spanタグで組み直せばやりたいことは出来るのではないかと思います。

html
1<meta charset="utf-8">
2
3<p id="a">あいうえお1質問カキクケコ2aiueoあイうエお</p>
4
5<style>
6.hiragana {
7    text-decoration: underline;
8    text-decoration-color: red;
9}
10.katakana {
11    text-decoration: underline;
12    text-decoration-color: blue;
13}
14.alphabet {
15    text-decoration: underline;
16    text-decoration-color: yellow;
17}
18.kanji {
19    text-decoration: underline;
20    text-decoration-color: green;
21}
22
23</style>
24<script>
25const element = document.getElementById('a')
26
27const matches = element.textContent.match(/(([あ-んー]{2,})|([ァ-ヶー]{2,})|([a-zA-Z]{2,})|[\u4e00-\u9fcf]{2,}|.+?)/g)
28element.textContent = ''
29matches.forEach(text => {
30    const newElement = document.createElement('span')
31    if (/[あ-んー]{2,}/.test(text)) {
32        newElement.classList.add('hiragana')
33    } else if (/[ァ-ヶー]{2,}/.test(text)) {
34        newElement.classList.add('katakana')
35    } else if (/[a-zA-Z]{2,}/.test(text)) {
36        newElement.classList.add('alphabet')
37    } else if (/[\u4e00-\u9fcf]{2,}/.test(text)) {
38        newElement.classList.add('kanji')
39    }
40    newElement.textContent = text
41    element.appendChild(newElement)
42})
43</script>

質問のテキストだと装飾できてはいますが、変な文字が入ってきたらどうなるかとかまでは深く考慮してません。あしからず。

投稿2020/03/05 14:10

Eggpan

総合スコア2729

下のコードはエスケープされていない文字を渡してそのままinnerHTMLに入れるとXSSの脆弱性になるので、**そのままでは絶対に使わないで下さい。**DOMを作る方向にしないと安全じゃないです。

この回答は忘れて下さい。

※悪い例として、回答は残します。

JavaScript
1const decorate = str => str.replace(
2  /(\p{Script=Latin}{2,})?(\p{Script=Hiragana}{2,})?(\p{Script=Katakana}{2,})?(\p{Script=Han}{2,})?/gu,
3  (_, latin, hiragana, katakana, han) => 
4    (latin ? `<span class=latin>${latin}</span>` : '') +
5    (hiragana ? `<span class=hiragana>${hiragana}</span>` : '') +
6    (katakana ? `<span class=katakana>${katakana}</span>` : '') +
7    (han ? `<span class=han>${han}</span>` : ''));

Codepenでのやってはいけないことをやったのでとりあえず応急処置だけでした実装例

上の例ではstyleはclassで指定しています。GoogleCromeでしか動作テストはしていません。

投稿2020/03/05 12:03

編集2020/03/05 12:26

raccy

総合スコア21735

退会済みユーザー

2020/03/05 12:19

素晴らしいです、GoogleCromeでは動きましたが、Firefoxでは動きませんでした Firefoxでも動くように改良したいのですが、全く処理が理解できない為、自分では何もできませんお手すきの時間でかまいませんので、GoogleCrome以外でも動くようなコードをいただくことはできませんでしょうか？

raccy

2020/03/05 12:22

ごめんなさい。脆弱性は回答を投稿してから気付きました。動く動かない以前に問題があるコードなので、使わないで下さい。

退会済みユーザー

2020/03/05 12:42

どこに問題があってXSSの脆弱性があるのでしょうか？よろしければ、教えていただけませんでしょうか？

退会済みユーザー

2020/03/05 12:43

＞エスケープされていない文字を渡してそのままinnerHTMLに入れるとエスケープすれば問題ないでしょうか？

raccy

2020/03/05 13:06

エスケープすれば良いといってもそれほど単純ではありません。コード全体を見て、どこにどのようにエスケープするのが適切なのか、それによって何らかの制限が発生したりしないのかどうか、そういったことを細かく分析して、対応する必要があります。どのように使われるのかわからないとどういった対応が正しいのか判断できないと言うことです。もしかしたら、コード全体の書き直しだって必要かも知れません。もし、ちゃんとするには、どこでどのようにするのか、今のコードを全て提示して、そこで実現するにはどうするのかを考える必要があります。初めは私も簡単にできそうって事で回答してしまいましたが、実際はより複雑です。なお、私が自分のコードに似たような機能を埋め込もうと思う場合はReactやVue.jsと言ったフレームワークを使うことを考えます。脆弱性がないサンプルが欲しいというのであれば、Hyperappで書いて渡しますが、本当にそれがほしいのですか？

退会済みユーザー

2020/03/05 13:24

すみません、駆け出しのプログラマーなもので、、、知識が乏しすぎてお話にならないかもしれないのですが、お聞きしたいことが沢山あるのですが、Twitterはお待ちではないでしょうか？ TeratailにTwitterのDMのような機能は無いのでしょうか。。。

退会済みユーザー

2020/03/05 13:27

ユーザーページにTwitterが貼ってありましたフォローさせていただき、DM送らせていただいても宜しいでしょうか？

raccy

2020/03/05 14:11

聞きたいことがあればここで聞けばいいのでは無いでしょうか？

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

冗長すぎてあまり参考にならないかもしれませんがこんな感じで