Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Regex Search Support #39

Open
ido123net opened this issue Aug 29, 2024 · 8 comments · May be fixed by #40
Open

Add Regex Search Support #39

ido123net opened this issue Aug 29, 2024 · 8 comments · May be fixed by #40
Assignees
@ido123net
Labels
enhancement New feature or request

Comments

@ido123net
Copy link

Feature Request:

Please add regex search functionality to react-logviewer.
This would enable more flexible and powerful search options, allowing users to match complex patterns in logs.

I'd be glad to help with a PR if needed! 😊
Keep in mind I'm new to the React world.

Thank you!
@melloware
Copy link
Owner

PR would be great!

@melloware melloware added the enhancement New feature or request label Aug 29, 2024
@melloware
Copy link
Owner

OK @ido123net i can see why the original developer only did "Knuth–Morris–Pratt" string matching for search. Say you have a very large log file this string searching is way faster and more efficient than an expensive RegExp search.

@ido123net
Copy link
Author

Yes, I also found it, I will try to leave the KMP part as is.

My idea is to implement a new function to search with regex, this will of-course be less efficient, therefore it will not be the default.

@ido123net ido123net linked a pull request Aug 29, 2024 that will close this issue
Draft
@melloware
Copy link
Owner

I just committed some JS doc changes to document that class just so I know why it was doing it!

@ido123net
Copy link
Author

@melloware look at #40 it works, but it breaks the highlights and filtering lines.

@ido123net
Copy link
Author

I just committed some JS doc changes to document that class just so I know why it was doing it!

I saw, I pulled the latest 😉

@melloware
Copy link
Owner

Yep I can point you to wheee the highlighting is happening and why it's not working. Let me review

@melloware
Copy link
Owner

OK the bug is in here:

react-logviewer/src/components/Utils/utils.ts

Lines 135 to 231 in 3646bca

export const searchFormatPart =
({
searchKeywords,
nextFormatPart,
caseInsensitive,
replaceJsx,
// True if this is the line the browser search is highlighting
selectedLine,
replaceJsxHighlight,
/**
* highlightedWordLocation is a bit weird, it deals with
* the special highlighting of a searched term
* if it is the one the browser-like search is currently
* highlighting. This is to deal with the case where there are
* multiple instances of the searched term in the same line,
* to make sure the correct one is highlighted.
*/
highlightedWordLocation,
}: any) =>
(part: any) => {
let formattedPart = part;
if (nextFormatPart) {
formattedPart = nextFormatPart(part);
}
// Escape out regex characters so they're treated as normal
// characters when we use regex to search for them.
const regexKeywords = searchKeywords.replace(
/[-[\]{}()*+?.,\\^$|#\s]/g,
"\\$&"
);
// Split part on keywords
const splitExp = new RegExp(
`(?=${regexKeywords})`,
caseInsensitive ? "i" : undefined
);
const splitParts = part.split(splitExp);
// Expression to replace keywords
const replaceExp = new RegExp(
`(${regexKeywords})`,
caseInsensitive ? "i" : undefined
);
// This deals with the special highlighting that occurs when a
// line is selected using the browser search
const handleHighlighting = () => {
// If this line is selected so we need to deal with special highlighting
if (selectedLine) {
// This is the special case where the searched
// word is at the very start of the string
if (splitParts.length === 1) {
formattedPart = reactStringReplace(
formattedPart,
regexKeywords,
replaceJsxHighlight
);
} else {
// This highlights the special color
// if the word is selected, otherwise, just
// the regular matched search term color
formattedPart = splitParts.map(
(splitPart: string, index: number) =>
reactStringReplace(
splitPart,
replaceExp,
index === highlightedWordLocation
? replaceJsxHighlight
: replaceJsx
)
);
}
}
// Finally, just do regular highlighting since this line isn't selected
else {
formattedPart = reactStringReplace(
formattedPart,
replaceExp,
replaceJsx
);
}
return formattedPart;
};
if (caseInsensitive) {
if (part.toLowerCase().includes(searchKeywords.toLowerCase())) {
formattedPart = handleHighlighting();
}
} else if (part.includes(searchKeywords)) {
formattedPart = handleHighlighting();
}
return formattedPart;
};

It does some magic tro remove regex strings and do a plain text match on highlighted words.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ido123net ido123net

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add the option to search with regex ido123net/react-logviewer
2 participants
@melloware @ido123net