如何反转包含复杂表情符号的字符串？

Question

输入：

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);

我也尝试了this question 中的所有答案，但没有一个有效。

有没有办法得到想要的输出？

Answer 1

如果可以，请使用lodash 提供的_.split() 函数。从version 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>

Answer 2

我采纳了 TKoL 使用 \u200d 字符的想法，并用它来尝试创建一个更小的脚本。

注意：并非所有作品都使用零宽度连接符，因此与其他作品字符会出现问题。

它使用传统的for 循环，因为我们会跳过一些迭代，以防我们找到组合的表情符号。在for 循环中有一个while 循环来检查是否有以下\u200d 字符。只要有一个，我们就添加接下来的 2 个字符，并通过 2 次迭代转发 for 循环，这样组合的表情符号就不会反转。

为了在任何字符串上轻松使用它，我将它作为字符串对象上的新原型函数。

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());

Answer 3

由于很多原因，反转 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 变成 ë，&c。转动代码点，aë 变成 eä，由不同的字母组成。有一个直接的表示，例如ä 作为自己的代码点，但使用修饰符同样有效。

第四，一切都在不断变化。表情符号中也有很多修饰符，如示例中使用的那样，并且每年都会添加更多。因此，如果 API 允许您访问代码点是否为修饰符的信息，则 API 的版本将确定它是否已经知道特定的新修饰符。

不过，Unicode 提供了一个 hacky 技巧，因为它只涉及视觉外观：

有书写方向修饰符。在示例的情况下，使用从左到右的书写方向。只需在文本开头添加一个从右到左的书写方向修饰符，根据 API / 浏览器的版本，它看起来会正确反转?

'\u202e' 被称为从右到左覆盖，它是从右到左标记的最强版本。

见this explanation by 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>

Answer 4

我知道！我将使用正则表达式。会出什么问题？ （答案留给读者作为练习。）

const text = 'Hello world?‍??‍?‍?‍?';

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

console.log(reversed);

Answer 5

替代解决方案是使用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"

Answer 6

您不仅对表情符号有问题，而且对其他组合字符也有问题。 这些感觉像单个字母但实际上是一个或多个 unicode 字符的东西被称为“扩展字素簇”。

将字符串分解成这些簇很棘手（例如，请参阅这些unicode docs）。我不会依赖自己实现它，而是使用现有的库。谷歌将我指向grapheme-splitter 库。该库的文档包含一些nice examples，它们会导致大多数实现出错：

使用这个你应该可以写：

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

---

旁白：对于来自未来的访客，或那些愿意生活在最前沿的人：

有一个proposal 可以将字形分段器添加到 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，你可能会做得更整洁......

有一个implementation here - 但我不知道它需要什么。

注意：这指出了一个有趣的问题，其他答案尚未解决。分段可以取决于您使用的语言环境 - 而不仅仅是字符串中的字符。

Answer 7

我只是为了好玩才决定这样做，这是一个很好的挑战。不确定它是否在所有情况下都正确，因此使用风险自负，但这里是：

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();

Answer 8

你可以使用：

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

它应该把你的字符串变成一个列表，把它反转然后再把它变成一个字符串。

Answer 9

const text = 'Hello world?‍??‍?‍?‍?';

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

console.log(反转);