当前位置：
  1. 首页
  2. 互联网
  3. 正文
本文介绍: 全网最详细的js判断字符串包含某个字符串的多种方法，比如search(),includes(),indexOf(),lastIndexOf()等

文章目录

1. 引言

在运行如下代码之前，你需要下载如下文件：

  1. bootstrap.min.css

  2. jquery-3.4.1.js

并且分别创建 字符串查找.html文件和字符串查询.js文件。

2. string.search()

  1. 用法：string.search(searchString)

  2. 返回值：number

  3. 字符串查找.html源代码

<!DOCTYPE html>
<html lang="en"&gt;
<head&gt;
    <meta charset="UTF-8"&gt;
    <title&gt;查询字符串</title&gt;
    <link href="../bootstrap.min.css" rel="stylesheet"&gt;
    <link href="../normalize.css" rel="stylesheet">
</head>
<body>
<div style="margin:10px;padding: 10px;">
    <form class="form-horizontal col-sm-5 " role="form">
        <div class="form-group">
            <label for="sourceString" class="col-sm-2 control-label">原字符串：</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="sourceString" placeholder="请输入原字符串">
            </div>
        </div>
        <div class="form-group">
            <label for="waitSearchString" class="col-sm-2 control-label">查询字符：</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="waitSearchString" placeholder="请输入查询字符">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">查询结果：</label>
            <div class="col-sm-10">
                <span type="text" class="form-control" style="color: red" id="searchResult" readonly></span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" onclick="search()">点击查询</button>
            </div>
        </div>
    </form>
</div>

<script src="../../js/jquery-3.4.1.js"></script>
<script src="字符串查询.js"></script>
</body>
</html>
  1. 字符串查询.js源代码
const search = function () {
    //原字符串
    let sourceString = $("#sourceString").val();
    if (!sourceString) {
        $("#searchResult").html("原字符串不能为空")
        return;
    }

    //查询字符
    let waitSearchString = $("#waitSearchString").val();
    if (!waitSearchString) {
        $("#searchResult").html("查询字符不能为空")
        return;
    }

    //判断原字符串是否包含查询字符
    $("#searchResult").html(sourceString.search(waitSearchString));
}
  1. 测试结果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

3. string.includes()

  1. 用法：string.includes(searchString, start)

  2. 返回值：boolean

  3. 字符串查找.html源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询字符串</title>
    <link href="../bootstrap.min.css" rel="stylesheet">
    <link href="../normalize.css" rel="stylesheet">
</head>
<body>
<div style="margin:10px;padding: 10px;">
    <form class="form-horizontal col-sm-5 " role="form">
        <div class="form-group">
            <label for="sourceString" class="col-sm-2 control-label">原字符串：</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="sourceString" placeholder="请输入原字符串">
            </div>
        </div>
        <div class="form-group">
            <label for="waitSearchString" class="col-sm-2 control-label">查询字符：</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="waitSearchString" placeholder="请输入查询字符">
            </div>
        </div>
        <div class="form-group">
            <label for="position" class="col-sm-2 control-label">指定下标：</label>
            <div class="col-sm-10">
                <input type="number" min="0" class="form-control" id="position" placeholder="请输入指定下标">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">查询结果：</label>
            <div class="col-sm-10">
                <span type="text" class="form-control" style="color: red" id="searchResult" readonly></span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" onclick="includes()">点击查询</button>
            </div>
        </div>
    </form>
</div>

<script src="../../js/jquery-3.4.1.js"></script>
<script src="字符串查询.js"></script>
</body>
</html>
  1. 字符串查询.js源代码
const includes = function () {
    //原字符串
    let sourceString = $("#sourceString").val();
    if (!sourceString) {
        $("#searchResult").html("原字符串不能为空")
        return;
    }

    //查询字符
    let waitSearchString = $("#waitSearchString").val();
    if (!waitSearchString) {
        $("#searchResult").html("查询字符不能为空")
        return;
    }

    //获取指定下标
    let position = $("#position").val();
    if (!position) {
        $("#searchResult").html("指定下标不能为空")
        return;
    }

    //判断原字符串是否包含查询字符
    $("#searchResult").html(sourceString.includes(waitSearchString, position).toString());
}
  1. 测试结果

在这里插入图片描述

  • 指定下标不超过原字符串的下标长度

在这里插入图片描述

  • 指定下标超过原字符串的下标长度

在这里插入图片描述

4. string.indexOf()

  1. 用法：string.indexOf(searchString, start)

  2. 返回值：number

  3. 字符串查找.html源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询字符串</title>
    <link href="../bootstrap.min.css" rel="stylesheet">
    <link href="../normalize.css" rel="stylesheet">
</head>
<body>
<div style="margin:10px;padding: 10px;">
    <form class="form-horizontal col-sm-5 " role="form">
        <div class="form-group">
            <label for="sourceString" class="col-sm-2 control-label">原字符串：</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="sourceString" placeholder="请输入原字符串">
            </div>
        </div>
        <div class="form-group">
            <label for="waitSearchString" class="col-sm-2 control-label">查询字符：</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="waitSearchString" placeholder="请输入查询字符">
            </div>
        </div>
        <div class="form-group">
            <label for="position" class="col-sm-2 control-label">指定下标：</label>
            <div class="col-sm-10">
                <input type="number" min="0" class="form-control" id="position" placeholder="请输入指定下标">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">查询结果：</label>
            <div class="col-sm-10">
                <span type="text" class="form-control" style="color: red" id="searchResult" readonly></span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" onclick="indexOf()">点击查询</button>
            </div>
        </div>
    </form>
</div>

<script src="../../js/jquery-3.4.1.js"></script>
<script src="字符串查询.js"></script>
</body>
</html>
  1. 字符串查询.js源代码
const indexOf = function () {
    //原字符串
    let sourceString = $("#sourceString").val();
    if (!sourceString) {
        $("#searchResult").html("原字符串不能为空")
        return;
    }

    //查询字符
    let waitSearchString = $("#waitSearchString").val();
    if (!waitSearchString) {
        $("#searchResult").html("查询字符不能为空")
        return;
    }

    //获取指定下标
    let position = $("#position").val();
    if (!position) {
        $("#searchResult").html("指定下标不能为空")
        return;
    }

    //判断原字符串是否包含查询字符
    $("#searchResult").html(sourceString.indexOf(waitSearchString, position));
}
  1. 测试结果
  • 查询字符为空

在这里插入图片描述

  • 指定下标不超过原字符串的下标长度

在这里插入图片描述

  • 指定下标超过原字符串的下标长度

在这里插入图片描述

5. string.lastIndexOf()

  1. 用法：string.indexOf(searchString, start)，从字符串的尾部开始查找

    • string表示原字符串

    • searchString 表示待查找的字符串

    • start 表示指定下标

  2. 返回值：number

  3. 字符串查找.html源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询字符串</title>
    <link href="../bootstrap.min.css" rel="stylesheet">
    <link href="../normalize.css" rel="stylesheet">
</head>
<body>
<div style="margin:10px;padding: 10px;">
    <form class="form-horizontal col-sm-5 " role="form">
        <div class="form-group">
            <label for="sourceString" class="col-sm-2 control-label">原字符串：</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="sourceString" placeholder="请输入原字符串">
            </div>
        </div>
        <div class="form-group">
            <label for="waitSearchString" class="col-sm-2 control-label">查询字符：</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="waitSearchString" placeholder="请输入查询字符">
            </div>
        </div>
        <div class="form-group">
            <label for="position" class="col-sm-2 control-label">指定下标：</label>
            <div class="col-sm-10">
                <input type="number" min="0" class="form-control" id="position" placeholder="请输入指定下标">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">查询结果：</label>
            <div class="col-sm-10">
                <span type="text" class="form-control" style="color: red" id="searchResult" readonly></span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" onclick="lastIndexOf()">点击查询</button>
            </div>
        </div>
    </form>
</div>

<script src="../../js/jquery-3.4.1.js"></script>
<script src="字符串查询.js"></script>
</body>
</html>
  1. 字符串查询.js源代码
const lastIndexOf = function () {
    //原字符串
    let sourceString = $("#sourceString").val();
    if (!sourceString) {
        $("#searchResult").html("原字符串不能为空")
        return;
    }

    //查询字符
    let waitSearchString = $("#waitSearchString").val();
    if (!waitSearchString) {
        $("#searchResult").html("查询字符不能为空")
        return;
    }

    //获取指定下标
    let position = $("#position").val();
    if (!position) {
        $("#searchResult").html("指定下标不能为空")
        return;
    }

    //判断原字符串是否包含查询字符
    $("#searchResult").html(sourceString.lastIndexOf(waitSearchString, position));
}
  1. 测试结果

  • 指定下标为2，表示从呀位置往前查找，自然能查到
    在这里插入图片描述

  • 指定下标为1，表示从好位置往前查找，自然查不到呀。

在这里插入图片描述

6. 总结

以上四种方式查询字符串，根据你的需求来使用。

原文地址:https://blog.csdn.net/lvoelife/article/details/127317797

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_22334.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

上一篇 jQuery时间控件——日期选择器(Datepicker)汉化版使用详解
下一篇 已解决Traceback (most recent call last): File “E:\Anaconda3\lib\site-packages\pip_vendor\urllib3\respon

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。