javascriptで全角・半角混合の文字列から半角英数字を抽出したい

###前提・実現したいこと

javascriptで文字カウンターを作っています。
入力された文字列が、半角英数字の場合は
0.5文字をカウントする文字カウンターを作成したいです。

###発生している問題・エラーメッセージ

textareaに入力された文字列を配列に入れ、filter関数を使用して
半角英数字のみ抽出して、lengthで得られた値を２で割ろうとしましたが
半角英数字を抽出できません。
console.logで確認すると半角英数字が配列に追加されないようです。

###該当のソースコード

   var char = this.textarea.val();
   var arr = [];
    arr.push(char);
    var result = arr.filter(function(element) {
      return element.match(/[^A-Za-z0-9]+/g);
    })

###試したこと
textareaから取得した文字列から配列を作成し、match関数を使用して半角英数字を判定しようとした。
→配列には全角は追加されるが、半角は追加されない。

###補足情報(言語/FW/ツール等のバージョンなど)
jqueryを使用しています。

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

回答3件

ベストアンサー

半角英数字のみを抜き出したいのであれば、return element.match(/[^A-Za-z0-9]+/g);ではなくて、return element.match(/[A-Za-z0-9]+/g);ではないでしょうか？また、半角英数字の判定は以下のように行えると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<textarea placeholder="text" id="textarea1"></textarea>
9<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
10<script>
11    $("#textarea1").on("input", function () {
12        var char = $("#textarea1").val();
13        var result = (char).match(/[a-zA-Z0-9]+/g) !== null ? (char).match(/[a-zA-Z0-9]+/g) : "";
14        console.log(result);
15    });
16</script>
17</body>
18</html>

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<textarea placeholder="text" id="textarea1"></textarea>
9<div id="result">
10    <div></div>
11    <div></div>
12    <div></div>
13</div>
14<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
15<script>
16    $("#textarea1").on("input", function () {
17        var results = [],
18            half = ($("#textarea1").val()).match(/[a-zA-Z0-9]/g) !== null ? ($("#textarea1").val()).match(/[a-zA-Z0-9]/g) : "",
19            full = ($("#textarea1").val()).match(/[^a-zA-Z0-9]/g) !== null ? ($("#textarea1").val()).match(/[^a-zA-Z0-9]/g) : "",
20            word_count = (half.length / 2) + full.length;
21
22        results.push("半角:" + half, "全角:" + full, "結果:" + word_count);
23
24        $("#result div").each(function (i) {
25            $(this).text(results[i]);
26        });
27    });
28</script>
29</body>
30</html>

投稿2017/05/04 11:02

s8_chu

総合スコア14731

wtn

2017/05/06 04:07

回答ありがとうございます。おっしゃる通り正規表現の書き方を間違えていますね(;^_^A 参考にさせていただきます。

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

「それ以外」を消す方法とか。（とりあえず空白と改行も無視するようにしています）

JavaScript
1$( '#textarea1' ).on( 'input', function () {
2	var results = [], v = $( this ).val()
3		half = v.replace( /[^!-~]|\s|\r|\n/g, '' ),
4		full = v.replace( /[!-~]|\s|\r|\n/g, '' ),
5		word_count = ( half.length / 2 ) + full.length;
6
7	results.push( "半角:" + half, "全角:" + full, "結果:" + word_count );
8
9	$( '#result div' ).each( function ( i ) {
10		$( this ).text( results[ i ] );
11	} );
12} ).trigger( 'input' );
13// https://teratail.com/questions/74868 s8_chuさんのコードを流用しました
14```**動くサンプル：**[https://jsfiddle.net/aotjvard/](https://jsfiddle.net/aotjvard/)
15
16---
17
18【正規表現で半角記号にパターンマッチさせる方法】
19[http://blog.layer8.sh/ja/2011/12/09/正規表現で半角記号にパターンマッチさせる方法/](http://blog.layer8.sh/ja/2011/12/09/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE%E3%81%A7%E5%8D%8A%E8%A7%92%E8%A8%98%E5%8F%B7%E3%81%AB%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E3%83%9E%E3%83%83%E3%83%81%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95/)

投稿2017/05/04 17:09

kei344

総合スコア69407

wtn

2017/05/06 04:51

回答ありがとうございます！半角、全角に分けて書いているので、読みやすいですね。また私は正規表現の使い方が、理解ができていないようです。リンク先参考にさせていただきますmm

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

半角英数字の文字数を0.5とする

入力された文字列が、半角英数字の場合は
0.5文字をカウントする文字カウンターを作成したいです。

素直に考えれば、「半角英数字の文字数 / 2 + それ以外の文字数」ですが、計算式を少し変えるとスマートに書ける事に気が付きます。

全体の文字数 - 半角英数字の文字数 / 2
(全体の文字数 + それ以外の文字数) / 2

下記コードは前者のアルゴリズムをコードに表したものです。

JavaScript
1function getStringSize (string) {
2  var halfSize = string.match(/[\da-zA-Z]/g);
3
4  return halfSize ? string.length - halfSize.length / 2 : string.length;
5}
6
7console.log(getStringSize('abc1234'));  // 3.5
8console.log(getStringSize('abcあいう'));  // 4.5
9console.log(getStringSize('あいうえお'));  // 5

文字列の配列化

JavaScript
1var char = this.textarea.val();
2var arr = [];
3arr.push(char);
4var result = arr.filter(function(element) {
5  return element.match(/[^A-Za-z0-9]+/g);
6})