Как выполнить поиск символов в строке при помощи Javascript?

Как выполнить поиск по строке Javascript

Давайте предположим, что перед нами стоит задача, в которой необходимо написать скрипт, выполняющий поиск по тексту. Каждое совпадение должно фиксироваться и засчитываться. При этом, наша программа должна уметь искать не только отдельные сочетания букв, но слов и целых предложений.

Примерно так и выглядит сегодняшняя задача.

Соответственно, перед тем, как писать javascript, определимся с видом страницы. Естественно, никаких хитростей дизайна в разборе данного примера применяться не будет, поэтому страничка будет выглядеть просто...

<body>
<form>
Введите текст:<br> <textarea name="mainstring" cols="70" rows="4" ></textarea><br><br>
Введите искомую букву или последовательность: <input type="text" name="typeletter" size="10">
<input type="button" value="Посчитать" onclick="countE(this.form)">
</form>
</body>

Этот отрывок кода страницы внутри тегов <body> даст нам примерно такой вид:

Как организовать поиск слов или букв в тексте при помощи Javascript

Собственно, больше ничего не требуется, для разбора темы этого вполне достаточно.

Итак, большое поле под "Введите текст" мы создали при помощи <textarea>, указав ему имя mainstring.

Следующее поле - уже знакомый нам по многим статьям <input type = "text....

Ну и, наконец, кнопка, о создании которых можно прочитать в статье Создание кнопки и нового окна при помощи Javascript

С визуальным содержимым вроде бы как разобрались. Приступим к внутреннему, невидимому обычному пользователю - написанию JavaScript.

Прежде всего, создадим функцию, которая будет запускаться по нажатию на кнопку и объявим переменную счетчика совпадений:

function countE(form){
var count =0;

Теперь нам необходимо получить данные, которые ввел пользователь в созданные поля:

var inputString = form.mainstring.value.toLowerCase();

//переменная "вводимая строка" = форма. имяформы. значение. в нижний регистр()

Под значком комментирования // я попытался перевести введенный код для того, чтоб было понятно, что язык программирования JavaScript не так страшен, как кажется начинающему. Даже при небольшом знании английского, можно практически интуитивно начать читать код, лишь поняв логику построения его отдельных элементов.

На русском языке строка означает, что значений введенной пользователем строки берется из формы с именем mainstring в нижнем регистре.


Важная информацияПеревести строку в нижний регистр важно в данном случае потому, что с точки зрения компьютера, заглавные и прописные буквы в данном случае - разные. Поэтому, чтобы не возникало путаницы или чтобы мы не потеряли некоторые слова при выполнении поиска, все следует перевести в нижний регистр.
Кроме того, важен не только регистр, но и раскладка клавиатуры, то есть, если пользователь ввел английскую букву "a", то и искать скрипт будет лишь буквы "a", введенные в английской раскладке!


Аналогичным образом поступаем и со вторым полем:

var typeletter=form.typeletter.value.toLowerCase();

Итак, мы получили значения введенных данных. Теперь давайте создадим сам счетчик. Делается это, как водится, при помощи цикла for.

При том, выходит так, что нам необходимо перебрать каждый(е) символ(ы) введенного в большом поле на соответствие введенному в маленьком. Поэтому наш цикл будет иметь такие условия:

for (var i=0; i<inputString.length; i++)

Переменная i=0 - это начальное условие. i меньше длины строки inputString (до каких пор совершать цикл). С каждым повторением цикла, i увеличивается на 1.

Благодаря этому, мы сможем перебрать текст побуквенно.

В статье Методы строковых объектов. Поиск мы уже рассматривали вопрос о том, как выделить определенную последовательность символов при помощи string.substring() - собственно, тут к этому и будем прибегать.

Итак, если фрагмент строки от символа i до i+длина искомой строки соответствует искомой строке, то счетчик увеличивается на 1. В кодовом выражении я представляю это так:

{
if(inputString.substring(i,i+typeletter.length)==typeletter){
count++;

}}

Закрываем наш цикл for. Таким образом, счетчик завершен. Нам же предстоит лишь вывести сообщение с результатами:

var msg = "В тексте " + count;
if (typeletter.length>1)
{msg += (" слов (или сочетаний букв) \""+typeletter+"\"")}
else{msg += (" букв \""+typeletter + "\"")};
alert(msg)
}

Тут операторы ветвления нужны для того, чтобы выводить различные сообщения, в зависимости от условий. Я обратил внимание лишь на то, что если длина искомого текста больше 1 (то есть, это не буква), выводится одно сообщение. В других случаях - другое. При желании, конечно, можно заморочиться и сделать ветвление более глубоким, на окончания или более человечное построение предложений, но это - не суть сейчас.

Код полностью Развернуть/свернуть

На этом вроде как и все! Напоследок, оставляю рабочий скрипт, встроенный в страницу лишь с той разницей, что результаты поиска будут выводиться непосредственно ниже формы на самой странице, а не при помощи alert():

Введите текст:

Введите искомую букву или последовательность: