web-dev-qa-db-ja.com

Javascriptを使用して各テキスト文字を処理する方法

文字列の個々の文字に警告したいのですが、その方法がわかりません。

だから、私が持っているなら：

var str = 'This is my string';

T、h、i、sなどを個別に警告できるようにしたいと思います。これは私が取り組んでいるアイデアのほんの始まりにすぎませんが、各文字を個別に処理する方法を知る必要があります。

私はjQueryを使いたいのですが、文字列の長さをテストした後にsplit関数を使う必要があるかもしれないと考えていました。

アイデア？

javascriptjquerystring
245
Nic Hubbard

アラートの順序が重要な場合は、これを使用してください。

for (var i = 0; i < str.length; i++) {
  alert(str.charAt(i));
}

アラートの順序が重要でない場合は、これを使用してください。

var i = str.length;
while (i--) {
  alert(str.charAt(i));
}
316
Eli Grey

それはおそらく解決以上のものです。別の単純な解決策に貢献したいだけです。

var text = 'uololooo';

// With ES6
[...text].forEach(c => console.log(c))

// With the `of` operator
for (const c of text) {
    console.log(c)
}

// With ES5
for (var x = 0, c=''; c = text.charAt(x); x++) { 
    console.log(c); 
}

// ES5 without the for loop:
text.split('').forEach(function(c) {
    console.log(c);
});
119
Mr. Goferito

純粋なJavaScriptで考えられる解決策の1つ：

for (var x = 0; x < str.length; x++)
{
    var c = str.charAt(x);
    alert(c);
}
73
miku

テキストの各文字を処理する方法（ベンチマーク付き）

https://jsperf.com/str-for-in-of-foreach-map-2

for

古典的なそしてはるかに最もパフォーマンスの高いもの。パフォーマンス重視のアルゴリズムで使用することを計画している場合、またはブラウザのバージョンとの最大限の互換性が必要な場合は、これを使用してください。

for (var i = 0; i < str.length; i++) {
  console.info(str[i]);
}

の

forfor...of はイテレータ用の新しいES6です。最近のほとんどのブラウザでサポートされています。それは視覚的により魅力的であり、タイプミスをしにくいです。プロダクションアプリケーションでこれを使用する場合は、おそらく Babel のようなtranspilerを使用しているはずです。

let result = '';
for (let letter of str) {
  result += letter;
}

forEach

機能的アプローチ。 Airbnbは を承認した。このようにすることの最大の欠点はsplit()です。これは文字列の個々の文字を格納するための新しい配列を作成します。

どうして？これは私たちの不変のルールを強制します。値を返す純粋な関数を扱う方が、副作用よりも推論しやすいです。

// ES6 version.
let result = '';
str.split('').forEach(letter => {
  result += letter;
});

または

var result = '';
str.split('').forEach(function(letter) {
  result += letter;
});

以下は私が嫌いなものです。

〜のために

... ofとは異なり、文字ではなく文字インデックスを取得します。それはかなりひどいパフォーマンスをします。

var result = '';
for (var letterIndex in str) {
  result += str[letterIndex];
}

地図

機能的なアプローチ、それは良いことです。しかし、mapはそのために使われることを意図していません。配列内の値を変更する必要がある場合に使用してください。そうではありません。

// ES6 version.
var result = '';
str.split('').map(letter => {
  result += letter;
});

または

let result = '';
str.split('').map(function(letter) {
  result += letter;
});
55
zurfyx

Unicodeの外側の文字がある場合は常に が壊れるため、ここでの答えのすべてではないにしてもほとんどが間違っていますBMP（基本多言語面） 。つまり、すべての絵文字が壊れます。

JavaScriptはすべての文字列に UTF -16 Unicodeを使用します。 UTF-16では、BMPを超える文字は、 " SurrogatePairという2つの部分から構成されています。 "とここにある答えの大部分は、そのようなペアの各部分を単一の文字としてではなく個別に処理します。

少なくとも2016年以降の現代のJavaScriptにおける1つの方法は、新しい String iterator を使用することです。これは、（ほぼ）MDNから直接抜粋した例です。

var string = 'A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A';

for (var v of string) {
  alert(v);
}
// "A"
// "\uD835\uDC68"
// "B"
// "\uD835\uDC69"
// "C"
// "\uD835\uDC6A"
36
hippietrail

あなたはこれを試すことができます

var arrValues = 'This is my string'.split('');
// Loop over each value in the array.
$.each(arrValues, function (intIndex, objValue) {
    alert(objValue);
})
20
Adriaan Stander

短いコードやワンライナーを書く必要があるときは、この「ハック」を使います。

'Hello World'.replace(/./g, function (char) {
    alert(char);
    return char; // this is optional 
});

これは改行を数えないので、良いことにも悪いことにもなり得ます。改行を含める場合は、/./を/[\S\s]/に置き換えます。あなたが見るかもしれない他のone-linersはおそらく.split()を使うでしょう 多くの問題を抱えています

10
Downgoat

もう一つの解決策...

var strg= 'This is my string';
for(indx in strg){
  alert(strg[indx]);
}
9
Pamsix

文字列にUnicode文字が含まれる場合は、バイトサイズが異なるため、for ... of文を使用することをお勧めします。

for(var c of "tree 木") { console.log(c); }
//"????A".length === 3
8
Martin Wantke

新しいJSはこれを可能にします：

const str = 'This is my string';
Array.from(str).forEach(alert);
6
papajson

in キーワードを使用できるようになりました。

    var s = 'Alien';
    for (var c in s) alert(s[c]);
6
mih0vil

あなたはそう個々の文字の配列を得ることができます

var test = "test string",
    characters = test.split('');

その後、通常のJavascriptを使用してループします。それ以外の場合は、jQueryを使用して文字列の文字を繰り返し処理できます。

var test = "test string";

$(test.split('')).each(function (index,character) {
    alert(character);
});
5
Rich

テキストを文字レベルで変換し、最後に変換したテキストを元に戻すには、次のようにします。

var value = "alma";
var new_value = value.split("").map(function(x) { return x+"E" }).join("")

だからステップ：

  • 文字列を文字の配列（リスト）に分割する
  • ファンクターを介して各文字をマップする
  • 結果の文字配列を結果の文字列に結合します。
4
Vajk Hermecz

短い答え：Array.from(string)はあなたがおそらく欲しいものをあなたに与えるでしょう、そしてあなたはそれについてあるいはそれが単なる配列であるので何でも繰り返すことができます。

では、abc|⚫️\n⚪️|????‍????‍????‍????という文字列で試してみましょう。

コードポイントは次のとおりです。

97
98
99
124
9899, 65039
10
9898, 65039
124
128104, 8205, 128105, 8205, 128103, 8205, 128103

そのため、一部の文字には1つのコードポイント（バイト）があり、一部の文字には2つ以上のコードポイントがあり、余分なテスト用に改行が追加されています。

テストした後に2つの方法があります。

  • 1バイトあたりのバイト数（1コードポイントあたりのコードポイント）
  • キャラクターグループ（家族全員ではない絵文字）
string = "abc|⚫️\n⚪️|????‍????‍????‍????"

console.log({ 'string': string }) // abc|⚫️\n⚪️|????‍????‍????‍????
console.log({ 'string.length': string.length }) // 21

for (let i = 0; i < string.length; i += 1) {
  console.log({ 'string[i]': string[i] }) // byte per byte
  console.log({ 'string.charAt(i)': string.charAt(i) }) // byte per byte
}

for (let char of string) {
  console.log({ 'for char of string': char }) // character groups
}

for (let char in string) {
  console.log({ 'for char in string': char }) // index of byte per byte
}

string.replace(/./g, (char) => {
  console.log({ 'string.replace(/./g, ...)': char }) // byte per byte
});

string.replace(/[\S\s]/g, (char) => {
  console.log({ 'string.replace(/[\S\s]/g, ...)': char }) // byte per byte
});

[...string].forEach((char) => {
  console.log({ "[...string].forEach": char }) // character groups
})

string.split('').forEach((char) => {
  console.log({ "string.split('').forEach": char }) // byte per byte
})

Array.from(string).forEach((char) => {
  console.log({ "Array.from(string).forEach": char }) // character groups
})

Array.prototype.map.call(string, (char) => {
  console.log({ "Array.prototype.map.call(string, ...)": char }) // byte per byte
})

var regexp = /(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/g

string.replace(regexp, (char) => {
  console.log({ 'str.replace(regexp, ...)': char }) // character groups
});
2
localhostdotdev

このコードを試す

    function myFunction() {
    var text =(document.getElementById("htext").value); 
    var meow = " <p> <,> </p>";
    var i;


    for (i = 0; i < 9000; i++) {

        text+=text[i] ;



    }

    document.getElementById("demo2").innerHTML = text;

}
</script>
<p>Enter your text: <input type="text" id="htext"/>

    <button onclick="myFunction();">click on me</button>
</p>
0
meow

これは古いブラウザや????のようなUTF-16文字で動作するはずです。

これは最も互換性のある解決策であるはずです。しかし、forループよりもパフォーマンスが劣ります。

正規表現は regexpu を使って生成しました

var str = 'My String ???? ';
var regEx = /(?:[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])/g


str.replace(regEx, function (char) {
    console.log(char)
});

お役に立てれば！

0
Ben Gubler

今日のJavaScriptでは、次のことが可能です。

Array.prototype.map.call('This is my string', (c) => c+c)

明らかに、c + cはあなたがcに対して何をしたいのかを表します。

これは戻る

["TT", "hh", "ii", "ss", " ", "ii", "ss", " ", "mm", "yy", " ", "ss", "tt", "rr", "ii", "nn", "gg"]

0
Pum Walters

各キャラクタをアニメートしたい場合は、span要素でラップする必要があります。

var $demoText = $("#demo-text");
$demoText.html( $demoText.html().replace(/./g, "<span>$&amp;</span>").replace(/\s/g, " "));

私はこれがそれをし、次にスパンを処理するための最良の方法だと思います。 （例えばTweenMaxの場合）

TweenMax.staggerFromTo（$ demoText.find（ "span"）、0.2、{autoAlpha：0}、{autoAlpha：1}、0.1）;

0
Христо Панайотов