react-highlight-me 1.0.0 → 1.1.0

package/README.md

@@ -5,7 +5,7 @@ A flexible React component for highlighting specific words or phrases within tex
 ## Features
 
 - 🎯 **Flexible Input**: Works with both plain text and React components
-- 🔍 **Multiple Words**: Highlight single words or arrays of words
+- 🔍 **Multiple Words**: Highlight single words, arrays of words, regex patterns, or arrays of regex patterns
 - 🎨 **Custom Styling**: Fully customizable highlight styles
 - 📝 **Case Sensitivity**: Optional case-sensitive or case-insensitive matching
 - 🔧 **TypeScript Support**: Written in TypeScript with proper type definitions
@@ -122,12 +122,14 @@ function App() {
 
 ## Props
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `React.ReactElement \| null` | `''` | The content to process for highlighting |
-| `words` | `string[] \| string` | `[]` | Word or array of words to highlight |
-| `highlightStyle` | `React.CSSProperties` | `{ backgroundColor: 'yellow', fontWeight: 'bold' }` | CSS styles to apply to highlighted text |
-| `caseSensitive` | `boolean` | `false` | Whether to perform case-sensitive matching |
+| Prop              | Type                                       | Default                                             | Description                                |
+|-------------------|--------------------------------------------|-----------------------------------------------------|--------------------------------------------|
+| `children`        | `React.ReactElement \| null`               | `''`                                                | The content to process for highlighting    |
+| `words`           | `string[] \| string \| RegExp \| RegExp[]` | `[]`                                                | Word or array of words to highlight        |
+| `highlightStyle`  | `React.CSSProperties`                      | `{ backgroundColor: 'yellow', fontWeight: 'bold' }` | CSS styles to apply to highlighted text    |
+| `caseSensitive`   | `boolean`                                  | `false`                                             | Whether to perform case-sensitive matching |
+| `isEscapePattern` | `boolean`                                  | `true`                                              | Mask regexp chars in words                 |
+| `isWordBoundary`  | `boolean`                                  | `true`                                              | Match words only at word boundaries        |
 
 ## Examples
 

package/highlight.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 
 type Props = {
   children?: React.ReactElement | null;
-  words?: string[] | string;
+  words?: string[] | string | RegExp | RegExp[];
   highlightStyle?: React.CSSProperties;
   caseSensitive?: boolean;
+  isEscapePattern?: boolean;
+  isWordBoundary?: boolean;
 }
 
 const TextHighlighter = ({ 
@@ -12,7 +14,9 @@ const TextHighlighter = ({
   words = [], 
   highlightStyle = { backgroundColor: 'yellow', fontWeight: 'bold' },
   caseSensitive = false,
-}) => {
+  isEscapePattern = true,
+  isWordBoundary = true,
+}: Props) => {
   // Convert words to array if it's a string
   const wordsArray = Array.isArray(words) ? words : [words];
   
@@ -22,14 +26,26 @@ const TextHighlighter = ({
   }
 
   // Function to escape regex special characters
-  const escapeRegex = (string) => {
-    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const escapeRegex = (term: string | RegExp) => {
+    if (term instanceof RegExp) {
+      return term.source
+    }
+
+    if (isEscapePattern) {
+      term = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    }
+
+    if (isWordBoundary) {
+      term = `\\b${term}\\b`;
+    }
+
+    return term
   };
 
   // Create a regex pattern for all words
   const pattern = wordsArray
-    .filter(word => word && word.trim())
-    .map(word => escapeRegex(word.trim()))
+    .filter(word => word)
+    .map(word => escapeRegex(word))
     .join('|');
   
   if (!pattern) {
@@ -45,13 +61,16 @@ const TextHighlighter = ({
     }
 
     const parts = textContent.split(regex);
-    
+
     return parts.map((part, index) => {
-      const shouldHighlight = wordsArray.some(word => 
-        caseSensitive 
+      const shouldHighlight = wordsArray.some(word => {
+        if (word instanceof RegExp) {
+          return word.test(part);
+        }
+        return caseSensitive
           ? part === word.trim()
-          : part.toLowerCase() === word.trim().toLowerCase()
-      );
+          : part.toLowerCase() === word.trim().toLowerCase();
+      });
 
       return shouldHighlight ? (
         <mark key={index} style={highlightStyle}>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-highlight-me",
-  "version": "1.0.0",
-  "description": "Highligh words in React components or text",
+  "version": "1.1.0",
+  "description": "Highlight words in React components or text",
   "main": "highlight.tsx",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"