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

【问题标题】：How to use RegExp in React-Native Webview's injectedJavaScript prop?如何在 React-Native Webview 的注入 JavaScript 道具中使用 RegExp？
【发布时间】：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/;

标签： javascript ios react-native wkwebview

【解决方案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 也是如此）。但正则表达式文字中不允许换行。

【讨论】：