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

Question

When I use regexp in React-Native-Webview's injectedJavaScript prop, an error Unterminated regular expression literal error will be thrown and the regexp will not be honored.

How should I use regexp in injectedJavaScript? If not, is there a workaround I can use?

Minimal reproducible code is below:

// 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 version: 13.3.1
react-native version: 0.61.2
react-native-webview version: 8.1.2

Check the bug screen below as well.

Full Error Message:

Error evaluating injectedJavaScript: This is possibly due to an unsupported return type. Try adding true to the end of your injectedJavaScript string. Error Domain=WKErrorDomain Code=4 "A JavaScript exception occurred" UserInfo={WKJavaScriptExceptionLineNumber=1, WKJavaScriptExceptionMessage=SyntaxError: Unterminated regular expression literal '/', WKJavaScriptExceptionColumnNumber=0, WKJavaScriptExceptionSourceURL=https://github.com/ashi009/node-fast-html-parser, NSLocalizedDescription=A JavaScript exception occurred}

Wild guess. Try a pattern without backslashes, see if it compiles. Can also put a ; at the end of the declaration — CertainPerformance
– CertainPerformance, Commented Mar 29, 2020 at 5:46
I could use a pattern without backslashes without error. Thanks! But I do need the patterns that have backslashes. What should I do then? — Lil E
– Lil E, Commented Mar 29, 2020 at 5:55
Sounds like it's being interpreted as an escape character or something in the webview, so a single backslash isn't enough in the pattern. Try double-escaping your backslashes, it may work: /\\n|\\r/; — CertainPerformance
– CertainPerformance, Commented Mar 29, 2020 at 5:57

CertainPerformance · Accepted Answer · 2020-03-29 06:05:24Z

4

You're not writing plain Javascript - you're writing Javascript inside the webview, through which your syntax has to be evaluated first. To use a literal backslash in injectedJavaScript (eg, for \r), put two backslashes instead (\\r):

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

I think that

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

takes the \n in the string literal to be a newline in the code, and equivalent to:

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

(and the same thing is done with the \r). But newlines aren't permitted in regular expression literals.

answered Mar 29, 2020 at 6:05

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related