javascript - 提示用户输入字符/字符串并判断输入是否在给定字符串中

标签 javascript html

我需要创建两个函数,请求用户输入一个字符和一个字符串。 输入与给定字符串匹配。

然后告诉用户,如果在默认给定字符串中找到输入字符/字符串。

到目前为止,我已经创建了获取用户输入的基础知识,但找不到任何方法来实现 JavaScript 函数。 任何帮助将不胜感激。

这是到目前为止我的代码..!

<html lang="en"> 
    <head> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width shrink-to-fit=no initial-scale=1">
        <title>Web Programming is fun!</title>

        <link rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcbeb3b3a8afa8aebdac9ce8f2eaf2ec" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css"
            integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
            crossorigin="anonymous"
        >
        <style>
            p{display: inline;}
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Web Programming is Fun!</h1>
            <br>
            <p>Lets use the above heading string to demonstrate inbuilt methods.</p>
           
            <label for="inputCharacter">Please type a character: </label>
            <input type="text" id="inputCharacter">
            <button onclick="matchCharacter()">Match Character</button>
            <p id="character"></p>

            <br>

            <label for="inputString">Please type a string: </label>
            <input type="text" id="inputString">
            <button onclick="matchString()">Match String</button>
            <p id="string"></p>
          
            <script>
                let text ="Web programming is fun!";
                function matchCharacter()
                {
                    var char=document.getElementById("inputCharacer").innerHTML;

                    if(char.indexOf(text) )
                    {
                       alert("Your Character is found in the string!")
                    }
                }

                function matchSring()
                {
                    
                }
            </script>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
         integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
         crossorigin="anonymous">
        </script>
        <script
         src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17757878636463657667572339213927" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
         crossorigin="anonymous">
        </script>
    </body>
        
</html>

最佳答案

我认为你颠倒了参数。您应该使用text.indexOf,而不是char.indexOf。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

<html lang="en"> 
    <head> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width shrink-to-fit=no initial-scale=1">
        <title>Web Programming is fun!</title>

        <link rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44262b2b30373036253404706a726a74" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css"
            integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
            crossorigin="anonymous"
        >
        <style>
            p{display: inline;}
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Web Programming is Fun!</h1>
            <br>
            <p>Lets use the above heading string to demonstrate inbuilt methods.</p>
           
            <label for="inputCharacter">Please type a character: </label>
            <input type="text" id="inputCharacter" maxLength="1">
            <button onclick="matchCharacter()">Match Character</button>
            <p id="character"></p>

            <br>

            <label for="inputString">Please type a string: </label>
            <input type="text" id="inputString">
            <button onclick="matchString()">Match String</button>
            <p id="string"></p>
          
            <script>
                let text ="Web Programming is Fun!";
                function matchCharacter()
                {
                    var char=document.getElementById("inputCharacter").value;

                    
                    if(text.indexOf(char) != -1)
                    {
                       alert("Your Character is found in the string!")
                    } else {
                      alert("Your Character is not found in the string!")
                    }
                }

                function matchString()
                {
                    var string=document.getElementById("inputString").value;

                
                if(text.indexOf(string) != -1)
                {
                   alert("String Found in heading!")
                } else {
                  alert("String not found in the heading!")
                }
                }
            </script>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
         integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
         crossorigin="anonymous">
        </script>
        <script
         src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9c91918a8d8a8c9f8ebecad0c8d0ce" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
         crossorigin="anonymous">
        </script>
    </body>
        
</html>

关于javascript - 提示用户输入字符/字符串并判断输入是否在给定字符串中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69111705/

相关文章:

javascript - Meteor 中的数据上下文渲染回调不可靠

html - 使用 Bootstrap 并排响应式设置复选框

jquery - 使用带有选择框的 jQuery 显示/隐藏 Div

javascript - 误解 Javascript 函数调用

javascript - 使用 Typescript 响应大日历自定义 View

图像 'src' 属性更改时的 JavaScript 事件?

javascript - 播放 HTML5 视频时无法加载 XML 文件

php - html 是否可以与 php 中动态生成的图像一起使用?

html - 空网页上的全窗口背景?

jquery - 如何使用DataTables字体很棒的图标?