資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 jQuery 中檢查字串是否以特定字串開頭/結尾？
透過一個名為“jQuery”的開源庫，JavaScript 與 HTML/CSS 檔案（特別是文件物件模型 (DOM)）之間的關係變得更加容易。這個包簡化了 HTML 檔案的遍歷和操作、瀏覽器事件的控制、DOM 視覺化的生成、Ajax 連線的促進以及跨平臺 JavaScript 程式設計。
為了驗證特定字串是否構成另一個字串的子字串，JavaScript 提供了各種字串函式。因此，jQuery 可以省略此任務。
但是，我們將詳細闡述驗證字串是否以另一個字串開頭或結尾的各種方法
startsWith() 和 endsWith() 方法
search() 方法
indexOf() 方法
substring() 方法
substr() 方法
slice() 方法
假設我們有一個字串 str = "Hi, how are you?"，我們需要確定它是否以 startword = "Hi" 開頭並以 endword = "?" 結尾。
方法 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 指令碼使用 JavaScript 初始化一個名為 text 的變數，其值為“Hello, World!”，並在網站上輸出。它建立了與各種 jQuery 函式相關的按鈕事件處理程式。當單擊這些按鈕時，會觸發各個按鈕的方法，並且輸出元件會顯示結果。startsWith() 方法查詢的第一個字元是“Hello”字元。endsWith() 方法確定字串是否以“World!”結尾。search() 方法在文字中搜索使用者提供的短語時，會返回第一個匹配項的索引。indexOf() 方法可以找到使用者提供的短語在文字中的索引。substring()、substr() 和 slice() 函式使用使用者提供的起始和結束索引從文字中提取子字串。總的來說，網頁的 text 變數使用 jQuery 函式和 JavaScript 程式碼進行操作和檢查，並且還允許使用者參與。
結論
JavaScript 提供了一系列字串函式來驗證字串是否為另一個字串的子字串。
JavaScript str.startsWith() 方法用於檢查指定的字串是否以提供的字串中的字元開頭。此方法區分大小寫，這意味著它區分大寫和小寫字母。
JavaScript 使用 str.endsWith() 函式來確定給定的字串是否以提供的字串中的字元結尾。
JavaScript 提供了一個名為 string.search() 的內建方法，用於搜尋給定字串物件和正則表示式之間的匹配項。
JavaScript 的 str.indexOf() 函式查詢提供的字串引數在提供的字串中的第一個出現的索引。結果為基於零的索引。
JavaScript 函式 string.substring() 檢索提供的字串的一部分，從起始索引開始到結束索引結束。索引從位置零開始。
JavaScript str.substr() 方法從提供的字串中提取預定數量的字元，從預定索引開始。本質上，此方法提取原始字串的一部分。
可以使用 JavaScript string.slice() 方法提取給定輸入字串的一部分或切片，並將其作為新字串返回。
580 次瀏覽
