add regex

Author: The-Infinitys

src/app/[article_year]/[month]/[aid]/components/client.tsx

@@ -2,7 +2,7 @@
 
 import { Article } from "../../../../article/article-client";
 import Image from "next/image";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react"; // useStateを追加
 import { generateArticleButton } from "../../../../article/article-client";
 import { useTranslations } from "next-intl";
 import { notFound } from "next/navigation";
@@ -11,8 +11,8 @@ import { AvailableLocales } from "@/i18n/request";
 interface ClientComponentProps {
   articles: Article[];
   slug: string;
-  tocs: {lang:AvailableLocales,toc:{ id: string; text: string; level: string }[]}[];
-  processedContents: {content:string,lang:AvailableLocales}[];
+  tocs: { lang: AvailableLocales; toc: { id: string; text: string; level: string }[] }[];
+  processedContents: { content: string; lang: AvailableLocales }[];
 }
 
 export default function ClientComponent({
@@ -27,10 +27,54 @@ export default function ClientComponent({
   const processedContent = processedContents.find((c) => c.lang === locale)?.content;
   const toc = tocs.find((t) => t.lang === locale)?.toc || [];
   const article = articles.find((a) => a.slug === slug && a.lang === locale);
-  console.log(article);
-  const otherArticles = articles.filter(
-    (a) => a.slug !== slug && a.lang === locale
-  );
+  const otherArticles = articles.filter((a) => a.slug !== slug && a.lang === locale);
+
+  // 検索機能用の状態
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const [searchResults, setSearchResults] = useState<string[]>([]);
+
+  // 検索実行用の関数
+  const handleSearch = (query: string) => {
+    if (!query.trim()) {
+      setSearchResults([]);
+      return;
+    }
+
+    try {
+      // 正規表現を作成（エラーハンドリング付き）
+      const regex = new RegExp(query, "i"); // 大文字小文字を無視
+      const results: string[] = [];
+
+      // 記事のタイトルと内容を検索
+      if (article?.title && regex.test(article.title)) {
+        results.push(`Title: ${article.title}`);
+      }
+
+      if (processedContent) {
+        // HTMLタグを除去して純粋なテキストを検索
+        const div = document.createElement("div");
+        div.innerHTML = processedContent;
+        const textContent = div.textContent || div.innerText || "";
+        const lines = textContent.split("\n").filter((line) => regex.test(line));
+
+        lines.forEach((line) => {
+          if (line.trim()) {
+            results.push(line.trim());
+          }
+        });
+      }
+
+      setSearchResults(results);
+    } catch (error) {
+      console.error("Invalid regular expression:", error);
+      setSearchResults(["Invalid regular expression"]);
+    }
+  };
+
+  // 検索クエリが変更されたときに検索を実行
+  useEffect(() => {
+    handleSearch(searchQuery);
+  }, [searchQuery]);
 
   useEffect(() => {
     const handleScroll = () => {
@@ -69,6 +113,27 @@ export default function ClientComponent({
 
   return (
     <div className="article-container">
+      {/* 検索バーを追加 */}
+      <div className="search-bar">
+        <input
+          type="text"
+          placeholder={t("pages.article.content.words.searchPlaceholder") || "Search article..."}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="search-input"
+        />
+        {searchResults.length > 0 && (
+          <div className="search-results">
+            <h3>{t("pages.article.content.words.searchResults") || "Search Results"}</h3>
+            <ul>
+              {searchResults.map((result, index) => (
+                <li key={index}>{result}</li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+
       <aside className="toc relative md:sticky" ref={tocRef}>
         <h2>{t("pages.article.content.words.index")}</h2>
         <ul>
@@ -105,4 +170,4 @@ export default function ClientComponent({
       </section>
     </div>
   );
-}
+}