JаvaScript: Текстовый результат поиска с выделением на JavaScript
В этом руководстве вы узнаете, как искать и выделять все вхождения слова в jаvascript или выделять текст jаvascript в div или textarea.
Всякий раз, когда вы работаете с jаvascript, вам может понадобиться выделить поиск на html-странице или в div и абзацах. Этот учебник поможет вам научиться выделять поиск на HTML-странице, абзаце и div, текстовой веб-странице.
Текстовый результат поиска с выделением jаvascript
Используя следующие шаги; вы можете выделить текст поиска в Textarea или Div, используя jаvascript; как показано ниже:
Создайте один html-файл
Прежде всего создайте новый html-файл и обновите в нем следующий код:
<!DOCTYPE html>
<html>
<head>
<title>jаvascript Highlight Search Result</title>
</head>
<body style="background: #F1F1F1">
<div style="text-align: center">
<h2>jаvascript Highlight Search Result</h2>
<form action="jаvascript:void(0)" method="" id="searchBar" name="searchBar">
<input name="search" id="search" type="text" size="25" maxlength="25">
<input name="search_button" type="button" value="Search" onclick="findAndHighlight()">
</form>
</div>
<div id="paragraph">
<p>
jаvascript is a dynamic computer programming language. It is lightweight and most commonly used as a part of
web pages, whose implementations allow client-side script to interact with the user and make dynamic pages.
It is an interpreted programming language with object-oriented capabilities.
</p>
<p>
jаvascript is the Programming Language for the Web jаvascript can update and change both HTML and CSS jаvascript can calculate, manipulate and validate data
</p>
</div>
</body>
</html>
Реализовать CSS
Цвет, которым вы хотите, чтобы поиск отображался выделенным. Для этого мы напишем CSS здесь и поместим этот CSS в файл HTML.
<style>
#paragraph span {background-color: green;color: #555;}
div {padding: 10px;}
</style>
В этом примере мы сохранили зеленый цвет текста выделения поиска. Вы также можете установить любой другой цвет, который вы хотите.
Реализовать код jаvascript
После этого мы напишем код jаvascript. Который выделит поиск.
Когда вы вводите слово во входные данные, указанные в форме, а затем нажимаете кнопку поиска, будет выполнен вызов функции jаvascript. И он проверит то, что вы написали в поле ввода. Будь то в следующем абзаце или нет.
Если вы написали в поле ввода слова. Если это слово встречается в абзаце, его цвет фона будет зеленым.
Поэтому обновите приведенный ниже код в свой html-файл:
<script>
function findAndHighlight() {
var text = document.getElementById("search").value;
var search = new RegExp("(\\b" + text + "\\b)", "gim");
var e = document.getElementById("paragraph").innerHTML;
var enew = e.replace(/(<span>|<\/span>)/igm, "");
document.getElementById("paragraph").innerHTML = enew;
var newe = enew.replace(search, "<span>$1</span>");
document.getElementById("paragraph").innerHTML = newe;
}
</script>
Полный исходный код
<!DOCTYPE html>
<html>
<head>
<title>jаvascript Highlight Search Result</title>
<style>
#paragraph span {background-color: green;color: #555;}
div { padding: 10px;}
</style>
</head>
<body style="background: #F1F1F1">
<div style="text-align: center">
<h2>jаvascript Highlight Search Result</h2>
<form action="jаvascript:void(0)" method="" id="searchBar" name="searchBar">
<input name="search" id="search" type="text" size="25" maxlength="25">
<input name="search_button" type="button" value="Search" onclick="findAndHighlight()">
</form>
</div>
<div id="paragraph">
<p>
jаvascript is a dynamic computer programming language. It is lightweight and most commonly used as a part of
web pages, whose implementations allow client-side script to interact with the user and make dynamic pages.
It is an interpreted programming language with object-oriented capabilities.
</p>
<p>
jаvascript is the Programming Language for the Web jаvascript can update and change both HTML and CSS
jаvascript can calculate, manipulate and validate data
</p>
</div>
<script>
function findAndHighlight() {
var text = document.getElementById("search").value;
var search = new RegExp("(\\b" + text + "\\b)", "gim");
var e = document.getElementById("paragraph").innerHTML;
var enew = e.replace(/(<span>|<\/span>)/igm, "");
document.getElementById("paragraph").innerHTML = enew;
var newe = enew.replace(search, "<span>$1</span>");
document.getElementById("paragraph").innerHTML = newe;
}
</script>
</body>
</html>
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.