Fixed regexp parsing
Brian Vaughn committed
Feb 6, 2019 at 21:33 UTC
9c093ac731e3c82798e68101f9838cbd03872db7
4 files changed
+18
-6
package.json
+1
@@ -53,6 +53,7 @@
53
"css-loader": "^1.0.1",
54
"error-stack-parser": "^2.0.2",
55
"es6-symbol": "3.0.2",
56
+ "escape-string-regexp": "^1.0.5",
57
"eslint": "^4.19.1",
58
"eslint-config-prettier": "^2.9.0",
59
"eslint-config-react-app": "^2.1.0",
src/devtools/views/Element.js
+9
-4
@@ -3,6 +3,7 @@
3
import React, { Fragment, useCallback, useContext, useMemo } from 'react';
4
import { ElementTypeClassOrFunction } from 'src/devtools/types';
5
import { TreeContext } from './context';
6
+import { createRegExp } from './utils';
7
import { SearchContext } from './SearchContext';
8
import { SelectedElementContext } from './SelectedElementContext';
9
import Icon from './Icon';
@@ -91,10 +92,14 @@ function DisplayName({ displayName, id }: DisplayNameProps) {
92
return displayName;
93
}
94
94
- const startIndex = displayName
95
- .toLowerCase()
96
- .indexOf(searchText.toLowerCase());
97
- const stopIndex = startIndex + searchText.length;
95
+ const match = createRegExp(searchText).exec(displayName);
96
+
97
+ if (match === null) {
98
+ return displayName;
99
+ }
100
+
101
+ const startIndex = match.index;
102
+ const stopIndex = startIndex + match[0].length;
103
104
const children = [];
105
if (startIndex > 0) {
src/devtools/views/SearchContext.js
+3
-2
@@ -7,6 +7,7 @@ import React, {
7
useMemo,
8
useReducer,
9
} from 'react';
10
+import { createRegExp } from './utils';
11
import { StoreContext } from './context';
12
import { SelectedElementContext } from './SelectedElementContext';
13
import Store from '../store';
@@ -100,7 +101,7 @@ function SearchController({ children }: Props) {
101
102
// Find all matching elements.
103
if (newText !== '') {
103
- const regExp = new RegExp(newText, 'i');
104
+ let regExp = createRegExp(newText);
105
store.roots.forEach(rootID => {
106
searchTree(store, rootID, regExp, newIDs);
107
});
@@ -169,7 +170,7 @@ function SearchController({ children }: Props) {
170
const { displayName } = ((store.getElementByID(id): any): Element);
171
172
// Add this item to the search results if it matches.
172
- const regExp = new RegExp(text, 'i');
173
+ const regExp = createRegExp(text);
174
if (displayName !== null && regExp.test(displayName)) {
175
const newElementIndex = ((store.getIndexOfElementID(
176
id
src/devtools/views/utils.js
+5
@@ -1,7 +1,12 @@
1
// @flow
2
3
+import escapeStringRegExp from 'escape-string-regexp';
4
import { meta } from '../../hydration';
5
6
+export function createRegExp(string: string): RegExp {
7
+ return new RegExp(escapeStringRegExp(string), 'i');
8
+}
9
+
10
export function getMetaValueLabel(data: Object): string | null {
11
switch (data[meta.type]) {
12
case 'react_element':