Skip to content

Highlight matching text when searching tasks 🔍 #383

Description

@anoopcodehack

Highlight matching text when searching tasks 🔍

File: client/src/components/Board/TaskCard.jsx

Search filters tasks but doesn't highlight
the matching word inside the card 💀 fr!!

Fix:
const highlightText = (text, search) => {
if (!search) return text
const parts = text.split(new RegExp((${search}), 'gi'))
return parts.map((part, i) =>
part.toLowerCase() === search.toLowerCase() ? (

{part}

) : part
)
}

// in card title:

{highlightText(task.title, searchQuery)}

~10 lines! No backend needed 🎯
Looks super professional!! ✨

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions