Safari 中用于拆分包括连字符的文本的 JS/Regex Positive Lookbehind Alternative 是什么？

Question

我通读了 great article 如何在 SVG 圆圈中定位和缩放文本。此处显示的文本换行算法使用以下代码行：

const words = text.split(/\s+/g); // To hyphenate: /\s+|(?<=-)/

此代码段的想法是用单词“Self-Sizing Text in a Circle”创建一个列表 -> ["Self-Sizing", "Text", "in", "a", "圆"].

^^该算法非常有效，但连字符版本在 Safari 中不起作用：

const words = text.split(/\s+|(?<=-)/g); // Not working in Safari

Invalid regular expression: invalid group specifier name

结果应该是 ["Self-", "Sizing", "Text", "in", "a", "Circle"]。请注意“Self-Sizing”的拆分，将连字符保留为单词 1 的一部分。

为了在所有浏览器中获得示例运行，我提出了这个解决方案：

text = text.replace(/-/g, "- "); // add a space next to the hyphen
const words = text.split(/\s+/g); // split using spaces

然而，以正则表达式独有的方式解决这个问题似乎是最优雅的，尤其是在扩大用于换行的字符范围时。

因此，我想问问作为社区的您是否有更好的主意。

可以找到一个完整的 playground here（helpers.js -> 第 7 行）或者您可以查看下面的 Stack Snipped：

const text = "Self-Sizing Text in a Circle";
const words = text.split(/\s+|(?<=-)/g);
console.log(words);

Answer 1

.split(/\s+|(?<=-)/) 操作意味着字符串被拆分为非空白字符块，并位于 - 字符之后的位置。这意味着您可以提取除了空格之外的任何字符块，后面有一个可选的连字符，或者任何其他连字符（实际上是第一个选项之后的连字符）。

const words = text.match(/[^\s-]+-?|-/g)

见regex demo。详情:

查看 JavaScript 演示：

const text = "Self-Sizing Text in a Circle";
const words = text.match(/[^\s-]+-?|-/g)
console.log(words);

请注意，如果您不需要关心连续的、前导的和尾随的连字符，您可以简单地使用

const words = text.match(/[^\s-]+-?/g)

[^\s-]+-? 将匹配除空格和 - 之外的一个或多个字符，然后是一个可选的 -.

What is a good JS/Regex Positive Lookbehind Alternative in Safari for splitting text including hyphens?