How to highlight searched text in solid

I have this code: https://github.com/nikitavoloboev/kuskus

GitHub

GitHub - nikitavoloboev/kuskus: Fast todo app

Fast todo app. Contribute to nikitavoloboev/kuskus development by creating an account on GitHub.

25 Replies

nikiviOP•2y ago

if you clone repo and press f key and try do a search it should do a highlight of matched todos as in the image above the thing is that I am not sure how to go about doing this

nikiviOP•2y ago

https://github.com/nikitavoloboev/kuskus/blob/main/src/components/LocalSearch.tsx

GitHub

kuskus/LocalSearch.tsx at main · nikitavoloboev/kuskus

Fast todo app. Contribute to nikitavoloboev/kuskus development by creating an account on GitHub.

nikiviOP•2y ago

is the search component

nikiviOP•2y ago

I checked and the usual way to do this, for example discord does this

nikiviOP•2y ago

somehow add spans inside the jsx

nikiviOP•2y ago

https://github.com/nikitavoloboev/kuskus/blob/main/src/components/Todo.tsx#L97

GitHub

kuskus/Todo.tsx at main · nikitavoloboev/kuskus

Fast todo app. Contribute to nikitavoloboev/kuskus development by creating an account on GitHub.

nikiviOP•2y ago

in here is where in my case the todo gets rendered

nikiviOP•2y ago

nikiviOP•2y ago

I thought of doing something like this

nikiviOP•2y ago

nikiviOP•2y ago

but that does not do what I thought it'd do as its a string

nikiviOP•2y ago

https://jsfiddle.net/julmot/hdyLpy37/

mark.js example with pure JavaScript - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

nikiviOP•2y ago

I found this library too that does what I want but not sure how it would be integrated with solid as that does raw dom access if anyone can help out, I would be forever grateful ❤️

thetarnav•2y ago

we are using something like this in the solid-primitives site: https://github.com/solidjs-community/solid-primitives/blob/main/site/src/components/Search/Search.tsx#L114

GitHub

solid-primitives/Search.tsx at main · solidjs-community/solid-primi...

A library of high-quality primitives that extend SolidJS reactivity. - solid-primitives/Search.tsx at main · solidjs-community/solid-primitives

nikiviOP•2y ago

oh beauty will try now btw on the same site I still get issue with solid-primitives-autofocus no idea whats up with it I do things as per the docs on 2nd time it all the time doesn't focus on the input

thetarnav•2y ago

yeah I know but to debug it I have to clone your repo so I just haven't got around to it yet 😛

nikiviOP•2y ago

if you get a chance, would be grateful ❤️ will try fix search now I made the repo easily cloneable just pnpm i and pnpm dev all state is in signals requestAnimationFrame

thetarnav•2y ago

hopefully something like codeflow would work

nikiviOP•2y ago

is so fancy first time I see this @thetarnav solid-primitives code is quite hard to understand

export function turnHighlightsIntoSpans(str: string, match: string) {
  const regex = new RegExp(`\\b(${match})\\b`, "g")
  const result = str.replace(regex, '<span class="bg-red-200">$1</span>')
  return <>{result}</>
}

export function turnHighlightsIntoSpans(str: string, match: string) {
  const regex = new RegExp(`\\b(${match})\\b`, "g")
  const result = str.replace(regex, '<span class="bg-red-200">$1</span>')
  return <>{result}</>
}

do you know if perhaps this can work somehow I googled string to dom jsx but results are for react there

nikiviOP•2y ago

https://stackoverflow.com/questions/73529094/how-do-you-get-an-html-string-from-jsx-without-react-im-using-solidjs-for-exam

Stack Overflow

How do you get an HTML string from JSX without React. I'm using Sol...

I'm not using React, so this won't work ReactDomServer.renderToString(<div>p</div>) I'm currently rendering the jsx in a hidden div with an id on the browser and then using document.

thetarnav•2y ago

I think you could but not this way

nikiviOP•2y ago

import { renderToString } from "solid-js/web" tried this too or wait there has to be some other method that is string to DOM

export function turnHighlightsIntoSpans2(str: string, match: string) {
  const regex = new RegExp(`\\b(${match})\\b`, "g")
  const parts = str.split(regex)
  const result = parts.map((part, index) => {
    if (part.toLowerCase() === match.toLowerCase()) {
      return <span class="bg-red-200">{part}</span>
    } else {
      return part
    }
  })
  return <div>{result}</div>
}

export function turnHighlightsIntoSpans2(str: string, match: string) {
  const regex = new RegExp(`\\b(${match})\\b`, "g")
  const parts = str.split(regex)
  const result = parts.map((part, index) => {
    if (part.toLowerCase() === match.toLowerCase()) {
      return <span class="bg-red-200">{part}</span>
    } else {
      return part
    }
  })
  return <div>{result}</div>
}

ok this works will adapt it to work with multiple matches

thetarnav•2y ago

yup, something like that is what I would do Maybe this is worth adding to solid-primitives Recreating n spans on each keypress can be avoided

Erik Demaine•2y ago

This would work with <span innerHTML={turnHighlightsIntoSpans(str, match)}/>. But if you go this route, please escape string in case it already contains HTML. Also you need to escape match in case it has regex notation in it.

thetarnav•2y ago

here's an initial draft: https://github.com/solidjs-community/solid-primitives/blob/site-highlights/site/src/primitives/highlight.ts#L7

GitHub

solid-primitives/highlight.ts at site-highlights · solidjs-communit...

A library of high-quality primitives that extend SolidJS reactivity. - solid-primitives/highlight.ts at site-highlights · solidjs-community/solid-primitives

Gaming

Programming

How to highlight searched text in solid