如何在 React-Native Webview 的 injectedJavaScript prop 中使用 RegExp？

Question

当我在 React-Native-Webview 的 injectedJavaScript 属性中使用 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*/`}
/>

OS: iOS
OS版本：13.3.1
react-native 版本：0.61.2
react-native-webview 版本：8.1.2

同时检查下面的错误屏幕。

完整错误信息：

评估注入时出错JavaScript：这可能是由于 return 类型不受支持。尝试将 true 添加到 injectedJavaScript 字符串的末尾。 Error Domain=WKErrorDomain Code=4 "A JavaScript exception occurred" UserInfo={WKJavaScriptExceptionLineNumber=1, WKJavaScriptExceptionMessage=SyntaxError: 未终止的正则表达式文字 '/', WKJavaScriptExceptionColumnNumber =0, WKJavaScriptExceptionSourceURL=https://github.com/ashi009/node-fast-html-parser, NSLocalizedDescription=A JavaScript 异常发生}

Answer 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 也是如此）。但是正则表达式文字中不允许使用换行符。

如何在 React-Native Webview 的 injectedJavaScript prop 中使用 RegExp？

How to use RegExp in React-Native Webview's injectedJavaScript prop?

javascript

ios

wkwebview

react-native