AI가 정말 프론트엔드를 대체할 수 있을까?
답변:不会完全代替
能用吗？复制到项目中只会报错 爆红 ……他完全不能理解你需要什么
JavaScript（简称JS）주로 웹 페이지에 대화형 동작을 추가하는 데 사용되는 경량 스크립팅 언어입니다. 다음 세 부분으로 구성됩니다.ECMAScript，DOM和BOM。
ECMAScript자바스크립트의 핵심 으로 배열, 함수, 객체, 문자열 등 기본 객체와 구문을 ECMA정의하는 국제기구에서 표준화한 언어 명세 이다.JavaScript
DOMJavaScript(Document Object Model) 은 HTML 문서 내의 HTML 요소 및 텍스트에 대한 동적 액세스 및 조작을 허용하는 객체 기반 API입니다 . JavaScript는 DOM API를 사용하여 HTML 요소 및 속성을 생성, 추가, 삭제 및 수정하고 사용자 작업에 응답할 수 있습니다.
BOM(브라우저 개체 모델)은 창, 화면 및 기록과 같은 개체를 포함하는 브라우저와 상호 작용하기 위한 API를 제공합니다. JavaScriptBOM API를 사용하여 새 URL 탐색, 경고 상자 팝업, 쿠키 설정 등과 같은 브라우저 동작을 제어할 수 있습니다.
JavaScript컴파일 없이 브라우저에서 직접 실행할 수 있는 인터프리터 언어입니다. 또한 객체 지향 프로그래밍과 함수형 프로그래밍을 지원합니다. JavaScript의 구문은 C 언어와 유사하지만 동적 유형과 약한 유형의 특성도 있습니다.
자, 오늘의 주제는 여기까지입니다.저자는 여러분의 지식을 대중화하기 위해 작은 케이스를 손으로 써줄 것입니다.
如果手写一个解析文件的工具
AI는 아이디어만 알려줄 뿐 글쓰기에는 도움이 되지 않습니다. AI 두뇌를 사용하고 마스터한다면 이전 기사를 읽어보세요.
코드는 말할 것도 없고 하하하,
Kamepai Qigong 코드가 작성되고 복사된 다음 대용량 파일을 사용하여 콘텐츠를 업로드하고 페이지에서 분석할 수 있습니다.
<!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>
모든 파일 형식, 제목 및 챕터가 표시됩니다!
