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

最新推荐文章于 2024-03-13 17:27:24 发布
最新推荐文章于 2024-03-13 17:27:24 发布
阅读量5.7k 收藏 7
点赞数 2
分类专栏： 免费专栏 文章标签： javascript 前端 html jquery bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvoelife/article/details/127317797
版权

文章目录

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. 总结

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

互联网全栈开发实战
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js判断数组是否包含某个字符串变量的实例
10-18
下面小编就为大家分享一篇js判断数组是否包含某个字符串变量的实例，具有很好的参考价值，希望对大家有所帮助
JS判断字符串包含的方法
10-24
主要介绍了JS判断字符串包含的方法,可有效的检测字符串中是否包含固定字符或子字符串,涉及javascript中indexOf的使用技巧,非常简单实用,需要的朋友可以参考下
js判断一个字符串是否包含一个子串的方法
01-21
本文实例讲述了js判断一个字符串是否包含一个子串的方法。分享给大家供大家参考。具体如下： 在我们前端日常开发中，经常会遇到判断一个字符串中是否包含某个子串，这里我们将去探究一些解决此种需求的方法以及正确的使用它们。理想情况下，我们要找的是一个能匹配我们的目的（if x contains y）的方法，并返回true或false。 一、String.prototype.indexOf和String.prototype.lastIndexOf 这两个方法，可能是我们最容易想到的，如果包含子串，则返回大于等于0的索引，否则返回-1，没有达到我们的理想情况。 代码如下:var str    = “My
js判断数组是否包含某个字符串
最新发布
furygdk的博客
03-13 706
这个方法返回数组中满足回调函数的第一个元素的值，如果找不到则返回undefined,参数是一个回调函数。这个方法返回一个布尔值，表示数组中是否至少有一个元素满足回调函数的条件,参数也是一个回调函数。: 这个方法返回指定元素在数组中的第一个匹配位置的索引，如果找不到则返回-1。等一些数组循环函数也可以判断，上面那四个函数其实也是循环遍历判断的。这个方法返回一个布尔值，表示数组中是否包含指定的元素。
JS中判断某个字符串、数组等是否包含某个值
m0_64729384的博客
11-10 2380
includes() 方法indexOf() 方法find() 方法some() 方法你可以根据自己的需求来选择其中一种方式。如果你使用的是 ES6 或以上的版本，建议使用 includes() 方法或 find() 方法，它们更加直观和便捷；如果你需要兼容 ES5 或更早的版本，那么可以使用 indexOf() 方法或 some() 方法。
js 判断字符串中是否包含某个字符串
weixin_34268753的博客
10-27 1万+
String对象的方法 方法一: indexOf() (推荐) var str = "123"; console.log(str.indexOf("3") != -1 ); // true indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。 方法二: search() var st...
js 判断字符串是否包含某个字符串
weixin_44384273的博客
01-17 576
字符串
js判断字符串包含某个字符串的多种方法
weixin_45693257的博客
06-15 4万+
1. string.search() 返回值：匹配成功的第一个字符的下标，未匹配则返回-1 用法：string.search(searchValue) 举个例子： let searchVal = 'yyds' let searchResult = searchVal.search('y') console.log(searchResult) // 0 3. string.includes() 返回值：Boolean 用法： string.includes(searchValue, start)
js字符串处理—是否包含某个字符串以及截取字符串
像风走过八千里
08-18 2万+
字符串内是否包含某个字符串——indexOf var oldString=“tongyuwan”； var newString=oldString.indexOf(‘tong’); if(newStrong)
JavaScript字符串包含
热门推荐
allway2的博客
05-09 7万+
您可以使用include（）方法，indexOf（）或正则表达式来检查JavaScript字符串是否包含字符或短语。include（）是检查字符串是否包含一个字母或一系列字母的最常用方法，并且是专门为此目的而设计的。 在任何编程语言中，检查字符串是否包含子字符串都是常见的任务。例如，假设您正在构建在线游戏。您可能需要检查用户名是否包含禁止使用的短语，以确保所有用户名都适合您的游戏。 JavaScript字符串包含 有三种方法可检查JavaScript字符串是否包含另一个字符或字符序列： in
js判断字符串中是否包含某个字符方法整理
前端e栈
02-25 3万+
整理js中可以用到的判断一个字符串中是否包含另外一个字符的方法 String对象方法 1、indexOf indexOf 返回指定字符串在该字符中首次出现的位置，如果没有找到，则返回 -1 indexOf 接收两个参数，第一是需要搜索的字符串，第二个参数是检索的位置，默认为0 let str = 'abcde'; //例如，从str第三位开始搜索 'a' console.log(str.indexOf('a',2));// -1 console.log(str.indexOf('a'))// 0 2、
ES6知识点整理之String字符串新增常用方法示例
12-12
本文实例讲述了ES6知识点整理之String字符串新增常用方法。分享给大家供大家参考，具体如下： 字符串includes,startsWith,endsWith方法测试 普通的用法： [removed] var str = 'Hello'; console.log(str.indexOf('o')); // 4 console.log(str.includes('e')); // true console.log(str.startsWith('H')); // true console.log(str.endsWith('e')); // false [removed] 运行结果： 添加
python七种方法判断字符串是否包含子串
09-16
主要介绍了python七种方法判断字符串是否包含子串，帮助大家更好的理解和学习python，感兴趣的朋友可以了解下
js-search：JS Search是一个高效的客户端搜索库，用于JavaScript和JSON对象
02-04
| | | | | Js Search：客户端搜索库 Js Search支持在客户端进行JavaScript和JSON对象的高效搜索。 它与ES5兼容，不需要jQuery或任何其他第三方库。 Js Search是的轻量级实现，提供了运行时性能改进和较小的文件大小。 此后，它已扩展到包括丰富的功能集-支持词干，停用词和TF-IDF排名。 以下是一些JS Perf基准测试，用于比较这两个搜索库。 （感谢调整了Lunr方面，以便进行更好的比较！） 如果您正在寻找一种更简单，经过Web-worker优化的JS搜索实用程序，请查看 。 安装 您可以使用或进行安装，如下所示： npm install
includeJS:动态包含 Javascript 的库
06-26
包含JS 动态包含 Javascript 的库 如何使用。 < script src = "include.js" > < / script > < script > var incl = new includeJS ( ) ; incl . load ( './js/testload.js' ) . load ( 'https://code.jquery.com/jquery-2.1.3.js' , function ( ) { // Someting callback when include first augment Javascript file loaded. } ) . finish ( function ( ) { // Execute on all files loaded. } ) ; < / script >
C#判断字符串中是否包含指定字符串及contains与indexof方法效率问题
01-01
　string.Contains是大小写敏感的，如果要用该方法来判断一个string是否包含某个关键字keyword，需要把这个string和这个keyword都转成小写或大写再调用Contains方法； string key = bbb; string temp = aaaBBBccc...
JS中判断某个字符串是否包含另一个字符串的五种方法
12-12
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。 方法二:match() var str = "123" var reg = RegExp(/3/); if(str.match(reg)){ //包含； } ...
基于js 字符串indexof与search方法的区别(详解)
11-30
1.indexof方法 indexOf() 方法可返回某个指定的字符串值在字符串中...以上这篇基于js 字符串indexof与search方法的区别(详解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
华为随行wifi配置前后端联调
09-02
你好！关于华为随行WiFi的前后端联调，首先需要明确一下具体的配置内容。通常来说，前端和后端的联调是为了确保系统的功能能够正常运行，并且前后端之间的数据交互能够顺利进行。 在华为随行WiFi的配置过程中，前端主要负责用户界面的展示和用户交互，而后端则负责处理用户请求，并与数据库或其他服务进行交互。为了进行前后端联调，你可以按照以下步骤进行： 1. 确保前后端开发环境已经搭建好，并且能够正常运行。 2. 在开发环境中，将前端和后端的代码进行整合，确保两者能够正常编译和启动。 3. 针对具体的功能模块，定义好前后端之间的接口。 4. 在前端代码中调用后端接口，发送请求并处理返回的数据。 5. 在后端代码中实现相应的接口，处理前端发送的请求，并返回相应的数据。 6. 运行前端和后端代码，通过接口进行数据交互。 7. 针对每个接口，进行测试和调试，确保数据的传输和处理逻辑正确无误。 8. 如果发现问题或错误，及时进行修改和调试，直到联调过程顺利完成。 在进行前后端联调过程中，可以借助一些调试工具和技术，例如使用浏览器的开发者工具来检查网络请求和响应，使用接口测试工具来模拟前端发送请求等。此外，注意及时记录和解决遇到的问题，保持前后端的沟通和协作，有助于提高联调的效率和质量。 希望以上信息对你有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

互联网全栈开发实战

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值