Add Regex Search Support

[ido123net]

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]

PR would be great!

[melloware]

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]

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.

[melloware]

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

[ido123net]

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

[ido123net]

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]

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

[melloware]

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.