如何在 jQuery 中检查字符串是否以特定字符串开头/结尾?
通过名为"jQuery"的开源库，JavaScript 与 HTML/CSS 文件(尤其是文档对象模型 (DOM))的关系变得更加容易。此包使其对 HTML 文件的遍历和操作、浏览器事件的控制、DOM 视觉效果的生成、Ajax 连接的促进以及跨平台 JavaScript 编程都变得更加容易。
为了验证特定字符串是否构成另一个字符串的子字符串，JavaScript 提供了各种字符串函数。因此，jQuery 是完成这项任务的必需品。
尽管如此，我们将阐述各种方法来验证一个字符串是否以另一个字符串开始或结束:
startsWith() 和 endsWith() 方法
search() 方法
indexOf() 方法
substring() 方法
substr() 方法
slice() 方法
假设我们有一个字符串 str = "Hi, how are you!"，我们的任务是确定它是否以起始词 = "Hi" 开头并以结束词 = "!" 结尾。 。
方法 1- str.startsWith()
JavaScript 中的 str.startsWith() 方法用于验证给定字符串中的字符是否以指定字符串开头。此技术区分大小写，这意味着它区分大写和小写字母。
上述方法承认两个参数，如前所述，并在下面描述:
searchString:它构成一个强制参数，用于存储需要搜索的字符串。
start:它确定在提供的字符串中要从中查找 searchString 的位置。默认值为零。
语法
str.startsWith( searchString , position )
示例
function func() {
var str = 'Hi, how are you?';
var value = str.startsWith('Hi');
console.log(value);
}
func();
输出
true
方法 2- endsWith()
要确定提供的字符串是否以另一个字符串中的字符结尾，请使用 JavaScript 方法 str.endsWith()。
上述方法采用前面提到的两个参数，如下所述:
searchString:它表示需要在给定字符串末尾找到的字符串。
length:length 参数确定要从中检查搜索字符串的原始字符串的大小。
执行此函数时，如果找到 searchString，则返回布尔值 true；否则，返回 false。
示例
function func() {
var str = 'Hi, how are you?';
var value = str.startsWith('you?');
console.log(value);
}
func();
输出
false
方法 3 - string.search()
JavaScript string.search() 方法是一个内置函数，用于搜索正则表达式与指定字符串对象之间的匹配项。
语法
string.search( A )
示例
var string = "Hi, how are you?"; var re1 = /s/; var re2 = /3/; var re3 = / /; var re4 = /, /; console.log(string.search(re1)); console.log(string.search(re2)); console.log(string.search(re3)); console.log(string.search(re4));
输出
-1 -1 3 2
方法 4:String indexOf()
JavaScript 中的 str.indexOf() 函数可发现给定字符串中提供的字符串参数的第一个实例的索引。结果以 0 为基数。
语法
str.indexOf(searchValue , index)
示例
function func() {
var str = 'Hi, How are you?';
var index = str.indexOf('are');
console.log(index);
}
func();
输出
8
方法 5:String substring()
JavaScript string.substring() 方法是一个内置函数，它返回给定字符串的一部分，从指定的起始索引开始，到提供的结束索引结束。此方法中的索引从零 (0) 开始。
语法
string.substring(Startindex, Endindex)
参数 Startindex 和 Endindex 确定要提取为子字符串的字符串段。Endindex 参数是可选的。
执行 string.substring() 函数时，它会创建一个代表原始字符串一部分的新字符串。
示例
var string = "Hi, how are you?"; a = string.substring(0, 4) b = string.substring(1, 6) c = string.substring(5) d = string.substring(0) console.log(a); console.log(b); console.log(c); console.log(d);
输出
Hi, i, ho ow are you? Hi, how are you?
方法 6:String substr()
JavaScript 中的 str.substr() 方法允许您从给定字符串中提取特定数量的字符，从指定索引开始。此方法可有效提取原始字符串的一段。
语法
str.substr(start , length)
示例
function func() {
var str = 'Hi, how are you?';
var sub_str = str.substr(5);
console.log(sub_str);
}
func();
输出
ow are you?
方法 7:string.slice()
JavaScript string.slice() 方法用于提取所提供输入字符串的一部分或片段并将其作为新字符串返回。
语法
string.slice(startingIndex, endingIndex)
示例
var A = 'Hi, How are you?'; b = A.slice(0,5); c = A.slice(6,9); d = A.slice(0); console.log(b); console.log(c); console.log(d);
输出
Hi, H w a Hi, How are you?
示例
<!DOCTYPE html>
<html>
<head>
<title>jQuery Methods Demo</title>
<style>
/* CSS Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
}
h2 {
margin-top: 30px;
}
p {
margin: 10px 0;
}
.container {
max-width: 600px;
margin: 0 auto;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
input[type="text"] {
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
.output {
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var text = "Hello, World!";
$("#textContent").text(text);
// startsWith() method
$("#startsWithBtn").click(function() {
var result = text.startsWith("Hello");
$("#startsWithOutput").text(result);
});
// endsWith() method
$("#endsWithBtn").click(function() {
var result = text.endsWith("World!");
$("#endsWithOutput").text(result);
});
// search() method
$("#searchBtn").click(function() {
var searchTerm = $("#searchTerm").val();
var result = text.search(searchTerm);
$("#searchOutput").text(result);
});
// indexOf() method
$("#indexOfBtn").click(function() {
var searchTerm = $("#indexOfTerm").val();
var result = text.indexOf(searchTerm);
$("#indexOfOutput").text(result);
});
// substring() method
$("#substringBtn").click(function() {
var start = $("#substringStart").val();
var end = $("#substringEnd").val();
var result = text.substring(start, end);
$("#substringOutput").text(result);
});
// substr() method
$("#substrBtn").click(function() {
var start = $("#substrStart").val();
var length = $("#substrLength").val();
var result = text.substr(start, length);
$("#substrOutput").text(result);
});
// slice() method
$("#sliceBtn").click(function() {
var start = $("#sliceStart").val();
var end = $("#sliceEnd").val();
var result = text.slice(start, end);
$("#sliceOutput").text(result);
});
});
</script>
</head>
<body>
<div class="container">
<h1>jQuery Methods Demo</h1>
<h2>Text Content</h2>
<p id="textContent"></p>
<h2>startsWith() Method</h2>
<button id="startsWithBtn">Check if the text starts with "Hello"</button>
<p>Result: <span id="startsWithOutput" class="output"></span></p>
<h2>endsWith() Method</h2>
<button id="endsWithBtn">Check if the text ends with "World!"</button>
<p>Result: <span id="endsWithOutput" class="output"></span></p>
<h2>search() Method</h2>
<input type="text" id="searchTerm" placeholder="Enter search term">
<button id="searchBtn">Search</button>
<p>Result: <span id="searchOutput" class="output"></span></p>
<h2>indexOf() Method</h2>
<input type="text" id="indexOfTerm" placeholder="Enter search term">
<button id="indexOfBtn">Find index</button>
<p>Result: <span id="indexOfOutput" class="output"></span></p>
<h2>substring() Method</h2>
<input type="text" id="substringStart" placeholder="Enter start index">
<input type="text" id="substringEnd" placeholder="Enter end index">
<button id="substringBtn">Get substring</button>
<p>Result: <span id="substringOutput" class="output"></span></p>
<h2>substr() Method</h2>
<input type="text" id="substrStart" placeholder="Enter start index">
<input type="text" id="substrLength" placeholder="Enter length">
<button id="substrBtn">Get substring</button>
<p>Result: <span id="substrOutput" class="output"></span></p>
<h2>slice() Method</h2>
<input type="text" id="sliceStart" placeholder="Enter start index">
<input type="text" id="sliceEnd" placeholder="Enter end index">
<button id="sliceBtn">Get slice</button>
<p>Result: <span id="sliceOutput" class="output"></span></p>
</div>
</body>
</html>
解释
提供的 HTML 脚本使用值"Hello, World!"初始化文本变量，并使用 JavaScript 将其输出到网站上。它创建与各种 jQuery 函数关联的按钮事件处理程序。单击这些按钮时会触发相应的方法，输出组件会显示结果。"Hello"字符是 startsWith() 方法查找的第一个字符。endsWith() 方法确定字符串是否以"World!"结尾。在文本中搜索用户提供的短语时，search() 方法会提供第一次出现的索引。可以使用 indexOf() 方法找到文本中用户提供的短语的索引。使用用户提供的开始和结束索引，substring()、substr() 和slice() 函数从文本中提取子字符串。一般来说，网页的文本变量是使用 jQuery 技术和 JavaScript 代码进行操作和检查的，这也允许用户参与。
结论
JavaScript 提供了一系列字符串函数来验证一个字符串是否是另一个字符串的子字符串。
JavaScript str.startsWith() 方法用于检查指定的字符串是否以所提供字符串中的字符开头。此方法区分大小写，这意味着它区分大写和小写字母。
JavaScript 利用 str.endsWith() 函数来确定给定的字符串是否以所提供字符串中的字符结尾。
JavaScript 提供了一种名为 string.search() 的内置方法，用于搜索给定字符串对象和正则表达式之间的匹配项。
JavaScript 的 str.indexOf() 函数查找所提供字符串参数在所提供字符串中第一次出现的索引。结果从零开始。
JavaScript 函数 string.substring() 检索所提供字符串的一部分，从起始索引开始，到结束索引结束。索引从零位置开始。
JavaScript str.substr() 方法从提供的字符串中提取从预定索引开始的预定数量的字符。本质上，这种技术提取了原始字符串的一部分。
可以使用 JavaScript string.slice() 方法提取给定输入字符串的一段或片段，该方法将提取的部分作为新字符串返回。
