純粋なフロントエンド JS は、ファイルのアップロード、解析、ページのレンダリングを実装します。

ここに画像の説明を挿入
AIは本当にフロントエンドに取って代わることができるのでしょうか?

答え：不会完全代替

ここに画像の説明を挿入

能用吗？复制到项目中只会报错  爆红  ……他完全不能理解你需要什么

ここに画像の説明を挿入

JavaScript（简称JS）軽量のスクリプト言語であり、主に Web ページにインタラクティブな動作を追加するために使用されます。これは 3 つの異なる部分で構成されます。ECMAScript，DOM和BOM。

ECMAScriptJavaScript の中核であり、ECMA国際機関によって標準化された言語仕様であり、JavaScript配列、関数、オブジェクト、文字列などの構文と基本オブジェクトを定義します。

DOMJavaScript(Document Object Model)は、HTML ドキュメント内の HTML 要素およびテキストへの動的なアクセスと操作を可能にするオブジェクトベースの API です。JavaScript は DOM API を使用して、HTML 要素と属性を作成、追加、削除、変更し、ユーザーのアクションに応答できます。

BOM (ブラウザオブジェクトモデル) は、ウィンドウ、画面、履歴などのオブジェクトを含むブラウザと対話するための API を提供します。JavaScriptBOM API を使用すると、新しい URL への移動、警告ボックスのポップアップ、Cookie の設定などのブラウザーの動作を制御できます。

JavaScriptこれは、コンパイルせずにブラウザ上で直接実行できるインタープリタ型言語です。オブジェクト指向プログラミングと関数型プログラミングもサポートします。JavaScript の構文は C 言語に似ていますが、動的型と弱い型の特徴もあります。

さて、今日の本題はここです、あなたの知識を広めるための小さなケースを著者が手書きします。

如果手写一个解析文件的工具

AI はアイデアを伝えるだけで、執筆には役立ちません。AI 脳を使いこなして使いこなすなら、前回の記事を読んでください

AI がコードの作成を支援

ここに画像の説明を挿入
コードは言うまでもありませんが、

カメパイ気功コードが作成されてコピーされます。その後、大きなファイルを使用してコンテンツをアップロードし、ページ上で分析できます。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>前端根据目录解析word,拆分不同段落</title>
  <script src="https://cdn.bootcss.com/mammoth/1.4.8/mammoth.browser.js"></script>
</head>

<body>
  <div class="container">
    <!-- 获取word段落文字 -->
    <button id="btn">获取txt</button>
    <!-- 上传 -->
    <input id="inp" type="file" />
    <!-- 展示word -->
    <div id="output"></div>
  </div>

  <script>
    const btn = document.querySelector("#btn");
    const inp = document.querySelector("#inp");
    const output = document.querySelector("#output");
    let html;

    btn.addEventListener("click", handleClick);
    inp.addEventListener("change", handleChange);

    function handleClick() {
      const arr = html?.split(/<h[1-6]>/g)?.slice(1);
      arr?.forEach((item) => {
        const [title, content] = item?.split("</h");
        const strippedTitle = title?.replace(/<[^>]+>/g, "");
        const strippedContent = content?.replace(/1>|<[^>]+>/g, "");
        const paragraph = `<div><strong>标题:</strong> ${strippedTitle}</div><div><strong>段落:</strong> ${strippedContent}</div>`;
        /* 
        insertAdjacentHTML()方法可以将指定的HTML字符串插入到指定元素的相对位置。具体参数含义如下：
        第一个参数：表示插入位置，共有四个值可选：
            'beforebegin'：在当前元素之前插入。
            'afterbegin'：在当前元素内部的第一个子元素之前插入。
            'beforeend'：在当前元素内部的最后一个子元素之后插入。
            'afterend'：在当前元素之后插入。
        第二个参数：表示要插入的HTML字符串。
        以下代码中，output.insertAdjacentHTML("beforeend", paragraph)
        表示将paragraph这段HTML字符串插入到output元素内部的最后一个子元素之后的位置。
        */
        output.insertAdjacentHTML("beforeend", paragraph);
        // 使用 innerHTML 属性的时候要非常小心，因为它会覆盖整个元素的 HTML 内容，包括已有的子元素和绑定的事件处理程序等。
        // 如果不小心操作，可能会导致意外的结果或安全问题。因此，建议使用 insertAdjacentHTML() 或其他更安全的方法来操作 DOM 元素。
        // output.innerHTML += paragraph;

        window.scrollTo({
          top: document.body.scrollHeight,
          behavior: "smooth",
        });
      });
    }

    function handleChange(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = handleLoad;
      reader.readAsArrayBuffer(file);
    }

    function handleLoad(loadEvent) {
      const arrayBuffer = loadEvent.target.result; // arrayBuffer
      mammoth.convertToHtml({ arrayBuffer }).then(handleConversion);
    }

    function handleConversion(result) {
      html = result.value;
      console.log(html);
      const newHTML = html.replace(
        /<(table|tr|td)>/g,
        '<$1 style="border-collapse: collapse; border: 1px solid rgb(204, 204, 204); padding: 8px 15px; color:#555555;">'
      );
      output.innerHTML = newHTML;
    }
  </script>
</body>

</html>

ここに画像の説明を挿入
すべてのファイルタイプ、タイトル、チャプターが表示されます。

純粋なフロントエンド JS は、ファイルのアップロード、解析、ページのレンダリングを実装します。

おすすめ