在文本中搜索字符串 - jQuery

使用 jQuery 可以简单地在 HTML 页面中搜索字符串。在本文中，我们将学习如何使用 jQuery 来搜索文本字符串。

实现

步骤一：获取文本值

首先，我们需要获得文本框内的值。我们可以使用 jQuery 的 val() 方法来获取输入框的值：

let inputText = $('#searchText').val();

这行代码获取了一个输入框中的文本值并将其存储在变量 inputText 中。

步骤二：在文本中搜索字符串

搜素文本字符串的简便方法是使用 indexOf() 方法。它将返回匹配结果的第一个索引位置，如果未找到匹配的文本，则返回 -1。

let text = $('#text').text();
let index = text.indexOf(inputText);

if (index !== -1) {
    // 文本匹配成功，执行相应操作
} else {
    // 文本不匹配，执行相应操作
}

这行代码获取了 ID 为 text 的元素中的文本值，并查找 inputText 的第一个匹配项。如果找到匹配项，它将执行第一个代码块，否则将执行第二个代码块。

步骤三：添加样式

我们可以使用 jQuery 的 css() 方法来添加样式，这样我们就可以凸显搜索结果：

let text = $('#text').text();
let index = text.indexOf(inputText);

if (index !== -1) {
    $('#text').html(text.substring(0, index) + "<span class='highlight'>" + text.substring(index, index + inputText.length) + "</span>" + text.substring(index + inputText.length));
} else {
    // 文本不匹配，执行相应操作
}

.highlight {
    background-color: yellow;
}

这行代码将在匹配字符串的前面和后面添加标签，并为标签添加样式。

完整代码

let inputText = $('#searchText').val();
let text = $('#text').text();
let index = text.indexOf(inputText);

if (index !== -1) {
    $('#text').html(text.substring(0, index) + "<span class='highlight'>" + text.substring(index, index + inputText.length) + "</span>" + text.substring(index + inputText.length));
} else {
    // 文本不匹配，执行相应操作
}

.highlight {
    background-color: yellow;
}

结论

在本文中，我们学习了如何使用 jQuery 在文本中搜索字符串。我们学习了如何使用 val() 方法来获取输入框的值，如何使用 indexOf() 方法在文本中查找字符串，并如何使用 css() 方法添加样式来突出显示匹配结果。