Liveview Text Search and Highlight Example App

# lib/my_app_web/live/json_search_live.ex
defmodule AppWeb.SandboxLive do
  use AppWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, assign(socket, text: "Hello world! This is a test. Hello again!", search: "")}
  end

  def handle_event("search_change", %{"value" => search}, socket) do
    {:noreply, assign(socket, search: search)}
  end

  def handle_event("text_change", %{"value" => text}, socket) do
    {:noreply, assign(socket, text: text)}
  end

  def render(assigns) do
    ~H"""
    <div class="p-4">
      <h1 class="text-xl mb-4">Search Test</h1>

      <div class="mb-4">
        <input
          type="text"
          value={@search}
          phx-keyup="search_change"
          placeholder="Search..."
          class="w-full p-2 border"
        />
      </div>

      <div class="mb-4">
        <textarea
          rows="4"
          phx-keyup="text_change"
          class="w-full p-2 border"
        ><%= @text %></textarea>
      </div>

      <div class="border p-4 bg-gray-100">
        <%= if @search != "" do %>
          <%= raw(String.replace(@text, ~r/#{Regex.escape(@search)}/i, "<span style='background: yellow'>\\0</span>")) %>
        <% else %>
          <%= @text %>
        <% end %>
      </div>
    </div>
    """
  end
end