如何在 React-Native Webview 的注入 JavaScript 道具中使用 RegExp？

Posted 2023-02-24

【中文标题】如何在 React-Native Webview 的注入 JavaScript 道具中使用 RegExp？

【英文标题】：How to use RegExp in React-Native Webview's injectedJavaScript prop?

【发布时间】：2020-03-29 05:12:08

【问题描述】：

当我在 React-Native-Webview 的注入 javascript 属性中使用 regexp 时，会抛出错误 Unterminated regular expression literal error 并且不会使用 regexp。

我应该如何在注入的 JavaScript 中使用正则表达式？ 如果没有，我可以使用解决方法吗？

最小可重现代码如下：

// this won't work
<WebView
  source= uri: 'https://github.com/ashi009/node-fast-html-parser' 
  injectedJavaScript=`const regE = /\n|\r/`
/>

// this won't work as well
<WebView
  source= uri: 'https://github.com/ashi009/node-fast-html-parser' 
  injectedJavaScript=`const regE = new RegExp(/\n|\r/);`
/>

// this will work
<WebView
  source= uri: 'https://github.com/ashi009/node-fast-html-parser' 
  injectedJavaScript=`const regE = /A*B*C*/`
/>

操作系统：ios 操作系统版本：13.3.1 react-native 版本：0.61.2 react-native-webview 版本：8.1.2

也检查下面的错误屏幕。

完整的错误信息：

评估注入的JavaScript 时出错：这可能是由于返回类型不受支持。尝试将 true 添加到注入的 JavaScript 字符串的末尾。错误域=WKErrorDomain 代码=4“发生 JavaScript 异常”UserInfo=WKJavaScriptExceptionLineNumber=1, WKJavaScriptExceptionMessage=SyntaxError: 未终止的正则表达式文字'/', WKJavaScriptExceptionColumnNumber=0, WKJavaScriptExceptionSourceURL=https://github.com/ashi009/node-fast-html-parser, NSLocalizedDescription=发生 JavaScript 异常

【问题讨论】：

可能是转义字符问题

您能详细说明一下吗？

疯狂猜测。尝试一个没有反斜杠的模式，看看它是否编译。也可以在声明的最后加上;

我可以使用没有反斜杠的模式而不会出错。谢谢！但我确实需要有反斜杠的模式。那我该怎么办？

听起来它在 webview 中被解释为转义字符或其他东西，因此在模式中单个反斜杠是不够的。尝试双转义反斜杠，它可能会起作用：/\\n|\\r/;

【参考方案1】：

您不是在编写普通的 Javascript - 您是在 webview 中编写 Javascript，首先必须通过它评估您的语法。要在 injectedJavaScript 中使用文字反斜杠（例如，对于 \r），请改为使用两个反斜杠 (\\r)：

injectedJavaScript=`const regE = new RegExp(/\\n|\\r/);`

我认为

<WebView
  source= uri: 'https://github.com/ashi009/node-fast-html-parser' 
  injectedJavaScript=`const regE = new RegExp(/\n|\r/);`
/>

将字符串文字中的\n 作为代码中的换行符，相当于：

<WebView
  source= uri: 'https://github.com/ashi009/node-fast-html-parser' 
  injectedJavaScript=`const regE = new RegExp(/
|\r/);`
/>

（\r 也是如此）。但正则表达式文字中不允许换行。