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

词频统计工具

输入文本

输入要统计的词/短语（每行一个）

词频统计结果

词组	出现次数	占原文比例

关键词密度统计工具结构概览

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 - 词频统计与结果展示

核心功能：词频统计

用户点击 统计词频 按钮时，触发 analyzeText() 函数。这个函数的主要任务是：

获取用户输入的文本和关键词。
调用 countCustomWordFrequency() 函数来统计每个关键词的出现次数。
显示统计结果。

`analyzeText()` 函数：

				
					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>`;
    }
}

详细解释：

获取用户输入：通过 document.getElementById() 获取用户在文本框中输入的内容。
数据验证：在没有输入文本或关键词的情况下，通过 alert() 提示用户输入。
处理关键词：将关键词按行分割，去除空行。
调用统计函数：调用 countCustomWordFrequency() 计算每个关键词的出现次数和占比。
展示结果：在 HTML 表格中动态生成行，显示每个关键词的统计信息。

词频统计：`countCustomWordFrequency()` 函数

				
					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;  // 返回统计结果
}

详细解释：

计算总词数：通过 text.split(/\s+/) 将文本按照空白字符分割成词数组，然后计算数组的长度，得到总词数。
正则表达式匹配：使用正则表达式 \\b${phrase}\\b，确保匹配的是完整的词组。g 表示全局匹配，i 表示忽略大小写。
计算词组出现次数：通过 text.match(regex) 获取所有匹配的词组，并计算其数量。
计算占比：根据词组出现次数与总词数的比值，计算出占比。

第四部分：清除功能

用户点击清除按钮时，触发 clearText() 函数，重置文本框和结果表格。

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