Як змінити рядок, що містить складні смайли?

Вхідні дані:

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()він здатний розділяти смайлики Unicode.

Використання рідного .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>

Я взяв ідею TKoL про використання \u200dперсонажа і використав його для спроби створити менший сценарій.

Примітка: Не всі композиції використовують столяр нульової ширини, тому він буде глючити з іншими символами композиції.

Він використовує традиційний forцикл, оскільки ми пропускаємо деякі ітерації, якщо знаходимо комбіновані смайлики. У forциклі є whileцикл, який перевіряє наявність наступного \u200dсимволу. Поки є один, ми також додаємо наступні 2 символи і пересилаємо forцикл з 2 ітераціями, щоб комбіновані смайлики не змінювались.

Щоб легко використовувати його на будь-якому рядку, я зробив це як нову функцію-прототип на об'єкті string.

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 біт було достатньо для Unicode. Поняття кодових точок як цілих чисел без фіксованої верхньої межі було історично додано як четверту загальну довжину символу для логічного кодування тексту.

Використання API, що дає вам доступ до фактичних точок коду, здається, це все. Але ...

По-третє, існує безліч кодових точок модифікаторів, що впливають на наступну кодову точку або наступні кодові точки. Наприклад, є діакритичний модифікатор, який перетворює наступне a на ä, e на ë тощо. Поверніть кодові точки навколо, і 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"

У вас виникають проблеми не тільки із смайликами, але й з іншими поєднуючими персонажами. Ці речі, які схожі на окремі літери, але насправді є одним або декількома символами унікоду, називаються "розширеними кластерами графем".

Розбивати рядок на ці кластери досить складно (наприклад, див. Ці документи Unicode ). Я б не покладався на його реалізацію сам, а використовував існуючу бібліотеку. Google вказав мені на бібліотеку роздільника графем . Документи для цієї бібліотеки містять кілька прикладних прикладів, які допоможуть втілити більшість реалізацій:

Використовуючи це, ви повинні мати можливість писати:

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

НАБОК: Для відвідувачів з майбутнього або тих, хто хоче жити на кровоточивому краю:

Існує пропозиція додати сегментатор графем до стандарту javascript. (Це насправді також надає інші варіанти сегментування). На даний момент він перебуває на етапі 3 перегляду для прийняття і в даний час впроваджений в АТ та 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 = 'Привіт світ👩‍🦰👩‍👩‍👦‍👦';

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

console.log (сторно);