複雑な絵文字を含む文字列を逆にする方法は？

入力：

Hello world👩‍🦰👩‍👩‍👦‍👦

必要な出力：

👩‍👩‍👦‍👦👩‍🦰dlrow olleH

私はいくつかのアプローチを試みましたが、どれも私に正しい答えを与えませんでした。

これは誤って失敗しました：

const text = 'Hello world👩‍🦰👩‍👩‍👦‍👦';

const reversed = text.split('').reverse().join('');

console.log(reversed);

これはちょっと機能しますが、👩‍👩‍👦‍👦4つの異なる絵文字に分かれます：

const text = 'Hello world👩‍🦰👩‍👩‍👦‍👦';

const reversed = [...text].reverse().join('');

console.log(reversed);

私もこの質問のすべての答えを試しましたが、どれもうまくいきません。

目的の出力を取得する方法はありますか？

可能であれば_.split()、lodashが提供する機能を使用してください。バージョン4.0以降、_.split()分割ユニコード絵文字が可能です。

ネイティブ.reverse().join('')を使用して「文字」を反転すると、ゼロ幅接合子を含む絵文字で問題なく機能するはずです。

function reverse(txt) { return _.split(txt, '').reverse().join(''); }

const text = 'Hello world👩‍🦰👩‍👩‍👦‍👦';
console.log(reverse(text));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>

私はこの\u200dキャラクターを使用するというTKoLのアイデアを採用し、それを使用してより小さなスクリプトを作成しようとしました。

注：すべてのコンポジションがゼロ幅ジョイナーを使用しているわけではないため、他のコンポジションキャラクターではバグが発生します。

for結合された絵文字が見つかった場合にいくつかの反復をスキップするため、従来のループを使用します。forループ内whileには、次の\u200d文字があるかどうかを確認するためのループがあります。1つある限り、次の2文字も追加し、for2回の反復でループを転送して、結合された絵文字が反転しないようにします。

任意の文字列で簡単に使用できるように、文字列オブジェクトの新しいプロトタイプ関数として作成しました。

String.prototype.reverse = function() {
  let textArray = [...this];
  let reverseString = "";

  for (let i = 0; i < textArray.length; i++) {
    let char = textArray[i];
    while (textArray[i + 1] === '\u200d') {
      char += textArray[i + 1] + textArray[i + 2];
      i = i + 2;
    }
    reverseString = char + reverseString;
  }
  return reverseString;
}

const text = "Hello world👩‍🦰👩‍👩‍👦‍👦";

console.log(text.reverse());

//Fun fact, you can chain them to double reverse :)
//console.log(text.reverse().reverse());

Unicodeテキストを逆にすることは、多くの理由で注意が必要です。

まず、プログラミング言語に応じて、文字列は、バイトのリスト、UTF-16コードユニットのリスト（16ビット幅、APIでは「文字」と呼ばれることが多い）、またはucs4コードポイントのいずれかとしてさまざまな方法で表されます。 （4バイト幅）。

次に、APIが異なれば、その内部表現がさまざまな程度で反映されます。バイトの抽象化に取り組むもの、UTF-16文字に取り組むもの、コードポイントに取り組むものがあります。表現がバイトまたはUTF-16文字を使用する場合、通常、この表現の要素へのアクセスを提供するAPIの部分と、バイトから（UTF-8を介して）またはから取得するために必要なロジックを実行する部分があります。実際のコードポイントへのUTF-16文字。

多くの場合、そのロジックを実行してコードポイントにアクセスできるようにするAPIの部分は後で追加されます。最初は、7ビットのASCIIがあり、少し後に、さまざまなコードページを使用して、8ビットで十分だと誰もが考えました。その後、ユニコードには16ビットで十分でした。固定された上限のない整数としてのコードポイントの概念は、テキストを論理的にエンコードするための4番目の一般的な文字長として歴史的に追加されました。

実際のコードポイントへのアクセスを提供するAPIを使用することは、それだけのようです。だが...

第三に、次のコードポイントまたは次のコードポイントに影響を与える修飾子コードポイントがたくさんあります。たとえば、次のaをä、eからë、＆cに変換するdiacritic修飾子があります。コードポイントを逆にすると、aëは異なる文字で作られたeäになります。独自のコードポイントとしてたとえばäの直接表現がありますが、修飾子を使用することも同様に有効です。

第四に、すべてが絶え間なく変化しています。例で使用されているように、絵文字には多くの修飾子もあり、毎年追加されます。したがって、APIがコードポイントが修飾子であるかどうかの情報へのアクセスを提供する場合、APIのバージョンは、特定の新しい修飾子をすでに知っているかどうかを判断します。

ただし、Unicodeは、見た目だけが重要な場合に、ハッキーなトリックを提供します。

書き込み方向修飾子があります。この例の場合、左から右への書き込み方向が使用されます。テキストの先頭に右から左への書き込み方向修飾子を追加するだけで、API /ブラウザーのバージョンによっては、正しく反転して表示されます😎

「\ u202e」は右から左へのオーバーライドと呼ばれ、右から左へのマーカーの最強バージョンです。

w3.orgによるこの説明を参照してください

const text = 'Hello world👩‍🦰👩‍👩‍👦‍👦'
console.log('\u202e' + text)

const text = 'Hello world👩‍🦰👩‍👩‍👦‍👦'
let original = document.getElementById('original')
original.appendChild(document.createTextNode(text))
let result = document.getElementById('result')
result.appendChild(document.createTextNode('\u202e' + text))

body {
  font-family: sans-serif
}

<p id="original"></p>
<p id="result"></p>

知っている！RegExpを使用します。何がうまくいかない可能性がありますか？（読者のための演習として残された回答。）

const text = 'Hello world👩‍🦰👩‍👩‍👦‍👦';

const reversed = text.match(/.(\u200d.)*/gu).reverse().join('');

console.log(reversed);

別の解決策はrunes、ライブラリを使用することです。小さいながらも効果的な解決策です。

https://github.com/dotcypress/runes

const runes = require('runes')

// String.substring
'👨‍👨‍👧‍👧a'.substring(1) => '�‍👨‍👧‍👧a'

// Runes
runes.substr('👨‍👨‍👧‍👧a', 1) => 'a'

runes('12👩‍👩‍👦‍👦3🍕✓').reverse().join(); 
// results in: "✓🍕3👩‍👩‍👦‍👦21"

絵文字だけでなく、他の結合文字にも問題があります。個々の文字のように感じますが、実際には1つ以上のUnicode文字であるこれらのものは、「拡張書記素クラスター」と呼ばれます。

文字列をこれらのクラスターに分割するのは注意が必要です（たとえば、これらのUnicodeドキュメントを参照してください）。私はそれを自分で実装することに依存せず、既存のライブラリを使用します。グーグルは私に書記素スプリッターライブラリを指さした。このライブラリのドキュメントには、ほとんどの実装をトリップさせるいくつかの優れた例が含まれています。

これを使用すると、次のように書くことができます。

var splitter = new GraphemeSplitter();
var graphemes = splitter.splitGraphemes(string);
var reversed = graphemes.reverse().join('');

ASIDE：未来からの訪問者、または最先端に住むことをいとわない訪問者のために：

javascript標準に書記素セグメンターを追加する提案があります。（実際には他のセグメント化オプションも提供します）。現在、承認のためにステージ3のレビュー中であり、現在JSCとV8に実装されています（https://github.com/tc39/proposal-intl-segmenter/issues/114を参照）。

これを使用すると、コードは次のようになります。

var segmenter = new Intl.Segmenter("en", {granularity: "grapheme"})
var segment_iterator = segmenter.segment(string)
var graphemes = []
for (let {segment} of segment_iterator) {
    graphemes.push(segment)
}
var reversed = graphemes.reverse().join('');

私よりも現代的なJavaScriptを知っていれば、おそらくこれをすっきりさせることができます...

ここに実装がありますが、何が必要かわかりません。

注：これは、他の回答ではまだ対処されていない楽しい問題を示しています。セグメンテーションは、文字列内の文字だけでなく、使用しているロケールに依存する可能性があります。

私はただ楽しみのためにそれをすることに決めました、良い挑戦でした。すべての場合に正しいかどうかわからないため、自己責任で使用してください。ただし、次のとおりです。

function run() {
    const text = 'Hello world👩‍🦰👩‍👩‍👦‍👦';
    const newText = reverseText(text);
    console.log(newText);
}

function reverseText(text) {
    // first, create an array of characters
    let textArray = [...text];
    let lastCharConnector = false;
    textArray = textArray.reduce((acc, char, index) => {
        if (char.charCodeAt(0) === 8205) {
            const lastChar = acc[acc.length-1];
            if (Array.isArray(lastChar)) {
                lastChar.push(char);
            } else {
                acc[acc.length-1] = [lastChar, char];
            }
            lastCharConnector = true;
        } else if (lastCharConnector) {
            acc[acc.length-1].push(char);
            lastCharConnector = false;
        } else {
            acc.push(char);
            lastCharConnector = false;
        }
        return acc;
    }, []);
    
    console.log('initial text array', textArray);
    textArray = textArray.reverse();
    console.log('reversed text array', textArray);

    textArray = textArray.map((item) => {
        if (Array.isArray(item)) {
            return item.join('');
        } else {
            return item;
        }
    });

    return textArray.join('');
}

run();

次を使用できます。

yourstring.split('').reverse().join('')

文字列をリストに変換し、逆にしてから再び文字列にする必要があります。

const text = 'Helloworld👩‍🦰👩‍👩‍👦‍👦';

const reverse = text.split（ ''）。reverse（）。join（ ''）;

console.log（reversed）;