在线词频统计工具，计算文章中关键词出现次数和占比

詞頻統計工具

輸入文字

輸入要統計的字詞/片語（每行一個）

詞頻統計結果

詞組	出現次數	佔原文比例

關鍵字密度統計工具結構概覽

HTML 結構：使用者介面（UI）的元素定義了文字輸入框、關鍵字輸入框和顯示結果的表格。
CSS 樣式：確保頁面佈局整齊，按鈕和表格有良好的使用者體驗。
JavaScript 功能：透過編寫JS 程式碼，實現詞頻計算和顯示結果。

第一部分：HTML - 使用者輸入介面

在HTML 部分，Well定義了頁面的結構和元素。主要包括：
1. 文字輸入框：使用者輸入需要進行分析的文字。
2. 關鍵字輸入框：使用者輸入需要統計的詞組。
3. 按鈕：用於觸發統計和清除操作。
4. 結果表格：展示統計結果，包括每個關鍵字的出現次數和佔比。

				
					<!-- 输入文本区域 -->
<textarea id="textInput" class="textarea-box" placeholder="輸入一段文字..."></textarea>

<!-- 输入关键词区域 -->
<textarea id="keywordsInput" class="textarea-box" placeholder="例如：screen door\nopen the door"></textarea>

<!-- 按钮触发 -->
<button class="action-button" onclick="analyzeText()">統計詞頻</button>
<button class="action-button" onclick="clearText()">清除</button>

<!-- 显示结果的表格 -->
<table id="resultTable" class="word-frequency-table">
    <thead>
        <tr>
            <th>詞組</th>
            <th>出現次數</th>
            <th>佔原文比例</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

第二部分：CSS - 頁面樣式

接著使用CSS來調整頁面的樣式和佈局，確保介面既簡潔又容易操作。

				
					/* 设置页面最大宽度，居中显示 */
.main-body-wrapper {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 20px auto;
    text-align: center;
}

/* 使用 Flexbox 布局，使输入框并排显示 */
.flex-container-wrapper {
    display: flex;
    gap: 20px;
}

/* 文本框的样式 */
.textarea-box {
    width: 100%;
    height: 200px;
    padding: 10px;
    font-size: 16px;
}

/* 表格样式 */
.word-frequency-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}
.word-frequency-table th, .word-frequency-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}
.word-frequency-table th {
    background-color: #f4f4f4;
}

第三部分：JavaScript - 詞頻統計與結果展示

核心功能：詞頻統計

用戶點擊 統計詞頻 按鈕時，觸發 分析文本（） 函數。這個函數的主要任務是：

取得使用者輸入的文字和關鍵字。
呼叫 計數自訂詞頻（） 函數來統計每個關鍵字的出現次數。
顯示統計結果。

`分析文本（）` 函數：

				
					function analyzeText() {
    // 获取用户输入的文本和关键词
    let text = document.getElementById("textInput").value.trim();
    let keywordsText = document.getElementById("keywordsInput").value.trim();

    // 检查是否输入了文本和关键词
    if (!text) {
        alert("请输入文本内容");
        return;
    }
    if (!keywordsText) {
        alert("请输入要统计的词组，每行一个");
        return;
    }

    // 处理关键词输入，按行分割
    let keywords = keywordsText.split("\n").map(kw => kw.trim()).filter(kw => kw);
    
    // 调用词频统计函数
    let stats = countCustomWordFrequency(text, keywords);

    // 清空之前的统计结果
    let resultTable = document.getElementById("resultTable").getElementsByTagName('tbody')[0];
    resultTable.innerHTML = "";  

    // 将每个关键词及其统计结果显示在表格中
    for (let [word, data] of Object.entries(stats)) {
        let newRow = resultTable.insertRow();
        newRow.innerHTML = `<td>${word}</td><td>${data.count}</td><td>${data.percentage}</td>`;
    }
}

詳細解說：

取得用戶輸入：透過 取得元素的 ID。 取得使用者在文字方塊中輸入的內容。
數據驗證：在沒有輸入文字或關鍵字的情況下，透過 警報（） 提示使用者輸入。
處理關鍵字：將關鍵字依行分割，去除空白行。
呼叫統計函數：調用 計數自訂詞頻（） 計算每個關鍵字的出現次數和佔比。
展示結果：在HTML 表格中動態產生行，顯示每個關鍵字的統計資料。

詞頻統計：`計數自訂詞頻（）` 函數

				
					function countCustomWordFrequency(text, keywords) {
    let wordFreq = {};  // 用来保存每个关键词的统计结果
    let totalWords = text.split(/\s+/).length;  // 计算文本总词数

    // 遍历关键词，使用正则表达式匹配并计算出现次数
    for (let phrase of keywords) {
        let regex = new RegExp(`\\b${phrase}\\b`, "gi");  // 创建正则表达式
        let matches = text.match(regex);  // 查找所有匹配的关键词
        let count = matches ? matches.length : 0;  // 计算关键词出现次数
        wordFreq[phrase] = count;  // 保存结果
    }

    // 计算每个关键词的占比
    let result = {};
    for (let [word, count] of Object.entries(wordFreq)) {
        result[word] = {
            count: count,
            percentage: totalWords > 0 ? ((count / totalWords) * 100).toFixed(2) + "%" : "0.00%"
        };
    }
    return result;  // 返回统计结果
}

詳細解說：

計算總詞數：透過 文字.拆分(/\s+/) 將文字依空白字元分割成詞數組，然後計算數組的長度，得到總詞數。
正規表示式匹配：使用正規表示式 \\b${片語}\\b，確保匹配的是完整的詞組。克 表示全域匹配，我 表示忽略大小寫。
計算詞組出現次數：透過 文字.匹配（正規表示式） 取得所有符合的詞組，並計算其數量。
計算佔比：根據詞組出現次數與總詞數的比值，計算出佔比。

第四部分：清除功能

用戶點擊清除按鈕時，觸發 清除文字（） 函數，重置文字方塊和結果表格。

				
					function clearText() {
    document.getElementById("textInput").value = "";
    document.getElementById("keywordsInput").value = "";
    document.getElementById("resultTable").getElementsByTagName('tbody')[0].innerHTML = "";
}