菜单 搜索
首页 前端知识 全网最详细的js判断字符串包含某个字符串的多种方法，比如search(),includes(),indexOf(),lastIndexOf()等

全网最详细的js判断字符串包含某个字符串的多种方法，比如search(),includes(),indexOf(),lastIndexOf()等

2024-01-25 11:01:08 前端知识 前端哥 603 195 我要收藏

文章目录

  • 1. 引言
  • 2. string.search()
  • 3. string.includes()
  • 4. string.indexOf()
  • 5. string.lastIndexOf()
  • 6. 总结

1. 引言

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

  1. bootstrap.min.css

  2. jquery-3.4.1.js

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

2. string.search()

  1. 用法：string.search(searchString)

    • string表示原字符串

    • searchString表示待查找的字符串

  2. 返回值：number

    • 匹配成功的第一个字符下标

    • 未匹配则返回-1

  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 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. 测试结果
  • 原字符串为空时的测试

在这里插入图片描述

  • 返回你所在字符串你好呀中的下标，即0，因为下标是从0开始的

在这里插入图片描述

  • 返回呀所在字符串你好呀中的下标，即2

在这里插入图片描述

3. string.includes()

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

    • string表示原字符串

    • searchString 表示待查找的字符串

    • start 表示指定下标

  2. 返回值：boolean

    • true表示匹配成功

    • false表示匹配失败

  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)

    • string表示原字符串

    • searchString 表示待查找的字符串

    • start 表示指定下标

  2. 返回值：number

    • 匹配成功后的第一个字符下标

    • 未匹配则返回-1

  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

    • 匹配成功后的第一个字符下标

    • 未匹配则返回-1

  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://www.qianduange.cn//article/365.html
标签
jquerybootstrap
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

纯js判断文件流格式类型：pdf,doc,docx,xls,xlsx,ppt,pptx一次搞定！

2024-02-04 21:02:58

three.js 场景中如何彻底删除模型和性能优化

2024-02-04 21:02:58

uniapp使用md5加密 js使用md5加密

2024-02-04 21:02:56

Vue项目引入translate.js 国际化自动翻译组件

2024-02-04 21:02:55

【筛选方法汇总】js简单实现多条件过滤数组对象，返回新的数组，根据一个数组内的元素，过滤另一个数组对象【持续更新】

2024-02-04 21:02:55

华为OD机试 - 推荐多样性（Java & JS & Python & C）

2024-02-04 21:02:54

自适应插件autofit.js使用(这里演示vue项目)

2024-02-04 21:02:54

Error: module ‘pages下某.js‘ is not defined 微信小程序

2024-02-04 21:02:49

【Vue】Mock.js介绍和使用与首页导航栏左侧菜单搭建

2024-02-04 21:02:37

jQuery的表格插件jqGrid 使用记录

2024-02-04 11:02:44

大家推荐的文章
1

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
2

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
3

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
4

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
5

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
6

导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994
7

Access-Control-Allow-Origin跨域解决及详细介绍

2024-02-03 12:02:13993
8

Get请求报错404出现原因及解决办法

2024-01-25 10:01:26993
9

基于vue.js在线购物商城系统设计与实现(uni-app框架 PHP后台) 研究背景和意义、国内外现状

2024-02-04 11:02:02992
10

vue3 vite pinia 配置动态路由、解决刷新页面路由消失问题

2024-01-27 01:01:35992

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！