基于JavaScript实现HTML文本输入关键词检测与评分功能求助

嘿，作为JS新手能自己尝试实现已经很棒啦！我来给你一个清晰易懂的方案，完全满足你的需求——检测输入框里的指定关键词，命中两个得2分，没命中得0分。

先上可以直接运行的完整代码，你可以直接复制测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键词分数检测</title>
    <style>
        .container {
            margin: 20px;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        textarea {
            width: 100%;
            height: 100px;
            margin-bottom: 10px;
            padding: 8px;
            box-sizing: border-box;
        }
        .score-display {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <div class="container">
        <label for="text-input">输入文本：</label>
        <textarea id="text-input" placeholder="请输入包含关键词的文本..."></textarea>
        <div class="score-display">当前得分：<span id="score">0</span></div>
    </div>

    <script>
        // 1. 定义需要检测的目标关键词
        const targetKeywords = ['good', 'eternal'];
        // 2. 获取页面元素
        const textInput = document.getElementById('text-input');
        const scoreElement = document.getElementById('score');

        // 3. 定义检测函数
        function calculateScore() {
            // 获取输入的文本，转成小写（不区分大小写匹配，若要区分则去掉toLowerCase()）
            const inputText = textInput.value.toLowerCase();
            // 统计命中的关键词数量
            let hitCount = 0;
            
            targetKeywords.forEach(keyword => {
                // 检查输入文本是否包含当前关键词
                if (inputText.includes(keyword.toLowerCase())) {
                    hitCount++;
                }
            });

            // 根据命中数量设置分数：命中2个得2分，否则0分
            const finalScore = hitCount === 2 ? 2 : 0;
            // 更新页面显示的分数
            scoreElement.textContent = finalScore;
        }

        // 4. 监听输入事件，实时计算分数
        textInput.addEventListener('input', calculateScore);
    </script>
</body>
</html>

关键部分解释 #

• 关键词定义：把需要检测的关键词放在targetKeywords数组里，后续如果要调整关键词直接改这个数组就行（按照你的需求，保持两个关键词即可）。
• 不区分大小写匹配：代码里把输入文本和关键词都转成了小写，这样用户输入“Good”或者“ETERNAL”也能被检测到。如果需要严格区分大小写，去掉两处toLowerCase()就行。
• 实时检测：通过input事件监听输入框的内容变化，用户每输入一个字符都会自动计算分数，体验更流畅。你也可以改成点击按钮触发，只需要把input事件换成按钮的click事件就行。
• 分数逻辑：用三元表达式hitCount === 2 ? 2 : 0实现需求——只有刚好命中两个关键词才得2分，少一个或者多一个（如果后续加了关键词）都得0分。

测试示例 #

当你输入包含“good”和“eternal”的文本时（比如“Life is good and love is eternal”），得分会自动变成2；如果只输入其中一个，或者都不输入，得分保持0。

如果你在自己实现过程中遇到了具体的问题（比如事件监听不生效、匹配逻辑出错），可以把你的代码贴出来，我再帮你排查~

内容的提问来源于stack exchange，提问作者Compoot