如何用JavaScript实现检测用户输入的字符/字符串是否在指定文本中

问题解决方案 #

你现有代码存在几处语法和逻辑错误，修正后即可实现需求，具体修改点如下：

• 元素ID拼写错误：获取字符输入框的ID少写了字母t，正确ID为inputCharacter
• 输入值获取错误：输入框的内容需要用.value属性读取，不能用.innerHTML
• indexOf调用逻辑颠倒：需要在目标字符串中搜索用户输入，应该写目标字符串.indexOf(搜索内容)，返回值不等于-1即代表内容存在
• 函数名拼写错误：匹配字符串的函数名少写了字母t，和按钮点击事件绑定的函数名不匹配
• 缺失异常和未匹配分支的处理逻辑

修正后的完整脚本代码

直接替换你原有<script>标签内的代码即可运行：

let text = "Web programming is fun!";
// 字符匹配函数
function matchCharacter() {
    // 取输入内容的第一个字符，避免用户输入多字符
    const inputChar = document.getElementById("inputCharacter").value.trim()[0];
    const resultNode = document.getElementById("character");
    // 空输入校验
    if (!inputChar) {
        resultNode.textContent = "请输入有效字符";
        return;
    }
    // 判断字符是否存在，需要忽略大小写可统一转小写/大写后比较
    if (text.indexOf(inputChar) !== -1) {
        resultNode.textContent = "您输入的字符在目标字符串中存在";
        alert("您输入的字符已找到！");
    } else {
        resultNode.textContent = "您输入的字符在目标字符串中不存在";
    }
}

// 字符串匹配函数
function matchString() {
    const inputStr = document.getElementById("inputString").value.trim();
    const resultNode = document.getElementById("string");
    if (!inputStr) {
        resultNode.textContent = "请输入有效字符串";
        return;
    }
    // 用includes方法判断包含关系，逻辑更直观，兼容所有现代浏览器
    if (text.includes(inputStr)) {
        resultNode.textContent = "您输入的字符串在目标字符串中存在";
        alert("您输入的字符串已找到！");
    } else {
        resultNode.textContent = "您输入的字符串在目标字符串中不存在";
    }
}

可选优化说明

如果需要实现大小写不敏感的匹配，只需要在比较前将两个字符串统一转为同一种大小写即可，示例：
text.toLowerCase().includes(inputStr.toLowerCase())

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