javascript - 如何解析和捕获任何度量单位

Question

在我的应用程序中，用户可以自定义测量单位，因此如果他们想以分米而不是英寸或整圈而不是度来工作，他们可以。但是，我需要一种方法来解析包含多个值和单位的字符串，例如 1' 2" 3/8 。我在 SO 上看到了一些正则表达式，但没有找到与英制系统的所有情况相匹配的正则表达式，更不用说允许任何类型的单位了。我的目标是尽可能拥有最宽松的输入框。

所以我的问题是: 如何以最用户友好的方式从字符串中提取多个值单位对？

我想出了以下算法:

检查非法字符并在需要时抛出错误。

trim 前导和尾随空格。

每次有一个非数字字符后跟一个数字字符时，将字符串拆分成部分，除了用于标识小数和分数的 .,/。

从零件中删除所有空格，检查字符误用(多个小数点或分数条)并将 '' 替换为 " 。

每个部分的拆分值和单位字符串。如果零件没有单位:

如果是第一部分，则使用默认单位。

否则，如果是分数，则将其视为与前一部分相同的单位。

否则，如果不是，则根据前一部分的单位将其视为 in、cm 或 mm。

如果不是第一部分并且无法猜测单位，则抛出错误。

检查单位是否有意义，是否都属于同一系统(公制/英制)并按照降序排列(ft > in > fraction 或 m > cm > mm > fraction)，如果不是，则抛出错误。

对所有部分进行转换和求和，在此过程中进行除法。

我想我可以使用字符串操作函数来完成大部分工作，但我觉得必须有一种更简单的方法通过正则表达式。

我想出了一个正则表达式: ((\d+('|''|"|m|cm|mm|\s|$) *)+(\d+(\/\d+)?('|''|"|m|cm|mm|\s|$) *)?)|((\d+('|''|"|m|cm|mm|\s) *)*(\d+(\/\d+)?('|''|"|m|cm|mm|\s|$) *))
它只允许在末尾使用分数，并允许在值之间放置空格。我从来没有使用过正则表达式捕获，所以我不太确定我将如何设法从这个困惑中提取值。明天我会再次处理这个问题。

Answer 1

My objective is to have the most permissive input box possible.

小心、更宽容并不总是意味着更直观。模棱两可的输入 应该 警告用户，而不是默默传递，因为这可能会导致他们在意识到输入没有按照他们希望的方式解释之前犯多个错误。

How can I extract multiple value-unit pairs from a string? I guess I could use string manipulation functions to do most of this, but I feel like there must be a simpler way through regex.

正则表达式是一个强大的工具，特别是因为它们可以在许多编程语言中使用，但要注意。当你拿着锤子时，一切都开始看起来像钉子。不要仅仅因为您最近了解了正则表达式的工作原理就尝试使用正则表达式来解决所有问题。
查看您编写的伪代码，您正在尝试同时解决两个问题:拆分字符串(我们称之为标记化)和根据语法解释输入(我们称之为解析)。您应该首先尝试将输入拆分为一个标记列表，或者可能是单位值对。完成字符串操作后，您就可以开始理解这些对了。关注点分离将使您免于头痛，因此您的代码将更容易维护。

I've never used regex capturing though, so I'm not so sure how I'll manage to extract the values out of this mess.

如果正则表达式具有全局 ( g ) 标志，则可用于在同一字符串中查找多个匹配项。如果您有一个可以找到单个单位值对的正则表达式，这将非常有用。在 JavaScript 中，您可以使用 string.match(regex) 检索匹配列表。但是，该函数会忽略全局正则表达式上的捕获组。
如果要使用捕获组，则需要在循环内调用 regex.exec(string)。对于每个成功的匹配， exec 函数将返回一个数组，其中项目 0 是整个匹配项，项目 1 及以后是捕获的组。
例如， /(\d+) ([a-z]+)/g 将查找一个整数，后跟一个空格和一个单词。如果你连续调用 regex.exec("1 hour 30 minutes") 你会得到:

["1 hour", "1", "hour"]

["30 minutes", "30", "minutes"]

null

连续调用是这样工作的，因为正则表达式对象保留了一个内部游标，您可以使用 regex.lastIndex 获取或设置。在使用不同的输入再次使用正则表达式之前，您应该将其设置回 0。
您一直在使用括号来隔离 OR 子句(例如 a|b )并将量词应用于字符序列(例如 (abc)+ )。如果您想在不创建捕获组的情况下执行此操作，则可以改用 (?: )。这称为非捕获组。它与正则表达式中的常规括号做同样的事情，但它里面的东西不会在返回的数组中创建一个条目。

Is there a better way to approach this?

这个答案的先前版本以一个比问题中发布的更难以理解的正则表达式结束，因为我当时并不了解，但今天这将是我的建议。这是一个正则表达式，一次只从输入字符串中提取一个标记。

/ (\s+)                             // 1 whitespace
| (\d+)\/(\d+)                      // 2,3 fraction
| (\d*)([.,])(\d+)                  // 4,5,6 decimal
| (\d+)                             // 7 integer
| (km|cm|mm|m|ft|in|pi|po|'|")      // 8 unit
/gi

很抱歉奇怪的语法突出显示。我使用空格使其更具可读性，但正确格式化它变成:

/(\s+)|(\d+)\/(\d+)|(\d*)([.,])(\d+)|(\d+)|(km|cm|mm|m|ft|in|pi|po|'|")/gi

这个正则表达式巧妙地利用了由 OR 子句分隔的捕获组。只有一种 token 的捕获组将包含任何内容。例如，在字符串 "10 ft" 上，对 exec 的连续调用将返回:

["10", "", "", "", "", "", "", "10", ""](因为“10”是一个整数)

[" ", " ", "", "", "", "", "", "", ""](因为“”是空格)

["ft", "", "", "", "", "", "", "", "ft"](因为“ft”是一个单位)

null

然后，标记器函数可以执行以下操作来处理每个单独的标记:

function tokenize (input) {
    const localTokenRx = new RegExp(tokenRx);

    return function next () {
        const startIndex = localTokenRx.lastIndex;
        if (startIndex >= input.length) {
            // end of input reached
            return undefined;
        }

        const match = localTokenRx.exec(input);

        if (!match) {
            localTokenRx.lastIndex = input.length;
            // there is leftover garbage at the end of the input
            return ["garbage", input.slice(startIndex)];
        }

        if (match.index !== startIndex) {
            localTokenRx.lastIndex = match.index;
            // the regex skipped over some garbage
            return ["garbage", input.slice(startIndex, match.index)];
        }

        const [
            text,
            whitespace,
            numerator, denominator,
            integralPart, decimalSeparator, fractionalPart,
            integer,
            unit
        ] = match;

        if (whitespace) {
            return ["whitespace", undefined];
            // or return next(); if we want to ignore it
        }

        if (denominator) {
            return ["fraction", Number(numerator) / Number(denominator)];
        }

        if (decimalSeparator) {
            return ["decimal", Number(integralPart + "." + fractionalPart)];
        }

        if (integer) {
            return ["integer", Number(integer)];
        }

        if (unit) {
            return ["unit", unit];
        }
    };
}

这个函数可以在一个地方完成所有必要的字符串操作和类型转换，让另一段代码对标记序列进行适当的分析。但这超出了这个 Stack Overflow 答案的范围，特别是因为这个问题没有指定我们愿意接受的语法规则。