分享一种借助 Kotlin/Wasm 在 JavaScript 中使用一致的 Kotlin/ Java 正则表达式的方案

16次阅读

共计 1362 个字符，预计需要花费 4 分钟才能阅读完成。

起因是我给我自己编写的高级选择器增加了 ~= 操作符 (等价 Kotlin/Java 里的 String.mtches 函数)

比如 [text~='ikun?'] 简单匹配 text 属性为 ikun 或者 iku 的节点

这个代码需要同时在 Android 和浏览器上运行，源代码是基于 Kotlin Multiplatform 构建，可以直接编译到 JavaScript

但是涉及到正则表达式，它在 Kotlin/Js 这块的 Regex 对象只是对 JavaScript 的 RegExp 的简单封装，缺失了很多特性，并没有真正实现跨平台一致

比如 (?im)abc 这个正则表达式在 Kotlin/Jvm 上被正常编译，但 RegExp 不支持此正则语法，所以在 Kotlin/Js 上运行后提示非法正则

也可以在 KT-49065 找到类似的问题，所以为了保持一致性，我需要解决在 JavaScript 上使用的问题

我一开始想着看看有没有人用 JavaScript 手动实现 Kotlin/Java 正则表达式，有的话我直接 pnpm add 就完了

搜遍了 www.npmjs.com 果然没有，看来是这个需求太小众了么

后面我又找到 regex101.com，看起来它在网页上实现了 Java8 的正则表达式解析和匹配

可惜它不是开源的，在 Github 找到的相关代码也是编译压缩后的产物

然后我找到了 openjdk17 的 java/util/regex/Pattern.java 的源代码，想着手动转译实现吧

但是看着如此庞大的代码，我一个 BUG 制造机器还是放弃了

最后想到了 Kotlin Multiplatform 下的 Kotlin/Wasm (目前处于实验阶段)

简单的原理描述就是将 kotlin 代码编译到 wasm 导出对象然后通过在浏览器端加载替换匹配函数

1 . 编译导出函数到 wasm


@JsExport
fun toMatches(source: String): (input: String) -> Boolean {val regex = Regex(source)
    return {input -> regex.matches(input) }
}

2 . 在浏览器加载这个导出函数并执行替换

import matchesInstantiate from '@gkd-kit/wasm_matches';
import matchesWasmUrl from '@gkd-kit/wasm_matches/dist/mod.wasm?url';

matchesInstantiate(fetch(matchesWasmUrl))
  .then((mod) => {
    const toMatches = mod.exports.toMatches;
    updateWasmToMatches(toMatches);
  })

关键流程就两步，看起来其实也挺简单的

说一下 Kotlin/Wasm 需要浏览器支持 WasmGC，也就是版本需要满足下列条件

分享一种借助 Kotlin/Wasm 在 JavaScript 中使用一致的 Kotlin/ Java 正则表达式的方案