Просмотр полной версии : Скрипт выделяющий слова в тексте. Что я делаю не так
Aleksey140569
13.02.2015, 00:11
Есть следующее задание: X
Найдите у себя на компьютере или в Интернете текст на 2000-4000 символов.
Вставьте данный текст на страницу.
Создайте текстовое поле, в которое пользователь будет вводить строку, которую будет нужно найти в тексте.
Напишите скрипт, который в тексте на странице будет выделять все совпадения тегом <b>.
Примечание: После ввода искомой строки в тексте на странице должны быть выделены тегом <b> все найденные совпадения со строкой, чтобы пользователь сразу видел, где найдена его строка. Для поиска используйте indexOf(), также потребуются циклы. Если совпадений нет, то через alert(): «Ничего не найдено!».
я написал следующий код:
<script type="text/javascript">
var text = "";
text = "Здесь очень длинный текст";
document.getElementById("text").innerHTML = text;
findWord()
{
var word = "";
var target = "";
word = myform.text.value
var target = word; // цель поиска
var pos = -1;
while ((pos = str.indexOf(target, pos+1)) != -1)
{
var text = text.replace(target, "<b>" + target + "</b>");
}
}
</script>
Но как его довести до ума нет ни одной идеи...
Aleksey140569,
а где html?
Aleksey140569
16.02.2015, 22:50
Вот код<!DOCTYPE html>
<html>
<head>
<title>Lesson018</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p id="text"></p>
<script type="text/javascript">
var text = "";
text = "Стучат по стыкам колеса, плещется в большом медном чайнике кипяток. В теплушке, под потолком, тускло светит аккумуляторная лампочка, на нарах, застеленных невиданной здесь пенкой, сидят и лежат спецназовцы. Кто дремлет, кто не торопясь курит и разговаривает, а дежурная смена находится у дверей при оружии и в полной боевой готовности. Полковник Бережной и генерал Бонч-Бруевич сидят у приоткрытого багрового зева буржуйки, и ведут свой неспешный разговор. Обсуждается извечный на Руси вопрос — кто виноват, и что делать. Сейчас разговор крутился вокруг первой половины ХХ века, ставшей для России воистину дорогой на Голгофу. Генерала интересовало то, как увести страну с этого пути, и какова при этом должна быть роль армии.";
document.getElementById("text").innerHTML = text;
function findWord()
{
var word = "";
var target = "";
var text2 = "";
word = myform.search.value
var len = word.length;
var target = word;
var pos = -1;
while((pos = text.indexOf(target, pos+1)) != -1)
{
var target2 = "";
target2 = text.splice(pos, len);
text2 = text.replace(target, "<b>" + target + "</b");
}
document.getElementById("text").innerHTML = text2;
}
</script>
<form name="myform">
<p>Введите слово: </p>
<input type="text" name="search" />
<input type="submit" value="Найти" onclick="findWord()" />
</form>
</body>
</html>
Aleksey140569,
:-?
<!DOCTYPE html>
<html>
<head>
<title>Lesson018</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
b{
background: #FFCC33;
font-size: 48px;
}
</style>
</head>
<body>
<p id="text"></p>
<script type="text/javascript">
var text = "Стучат по стыкам колеса, плещется в большом медном чайнике кипяток. В теплушке, под потолком, тускло светит аккумуляторная лампочка, на нарах, застеленных невиданной здесь пенкой, сидят и лежат спецназовцы. Кто дремлет, кто не торопясь курит и разговаривает, а дежурная смена находится у дверей при оружии и в полной боевой готовности. Полковник Бережной и генерал Бонч-Бруевич сидят у приоткрытого багрового зева буржуйки, и ведут свой неспешный разговор. Обсуждается извечный на Руси вопрос — кто виноват, и что делать. Сейчас разговор крутился вокруг первой половины ХХ века, ставшей для России воистину дорогой на Голгофу. Генерала интересовало то, как увести страну с этого пути, и какова при этом должна быть роль армии.",
p = document.getElementById("text");
p.innerHTML = text;
function findWord()
{
var target = new RegExp('\('+myform.search.value+'\)', 'mig'),
text2 = text.replace(target, "<b>$1<\/b>");;
p.innerHTML = text2 == text || !myform.search.value ? (alert('Ничего не найдено!'), text) : text2 ;
myform.search.value = '';
return false
}
</script>
<form name="myform" onsubmit="return findWord()">
<p>Введите слово: </p>
<input type="text" name="search" value="кто"/>
<input type="submit" value="Найти" />
</form>
</body>
</html>
Aleksey140569
18.02.2015, 20:21
Рони, большое большое спасибо!
Alexey1985
23.05.2017, 12:16
Нет. К сожалению это не вариант. В целях обучения, нужно обязательно решить эту задачу с использованием метода indexOf();
В целях обучения
18.02.2015
:blink:
Alexey1985,
<!DOCTYPE html>
<html>
<head>
<title>Lesson018</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
b{
background: #FFCC33;
font-size: 48px;
border-radius:4px;
}
</style>
</head>
<body>
<p id="text"></p>
<script type="text/javascript">
var text = "Стучат по стыкам колеса, плещется в большом медном чайнике кипяток. В теплушке, под потолком, тускло светит аккумуляторная лампочка, на нарах, застеленных невиданной здесь пенкой, сидят и лежат спецназовцы. Кто дремлет, кто не торопясь курит и разговаривает, а дежурная смена находится у дверей при оружии и в полной боевой готовности. Полковник Бережной и генерал Бонч-Бруевич сидят у приоткрытого багрового зева буржуйки, и ведут свой неспешный разговор. Обсуждается извечный на Руси вопрос — кто виноват, и что делать. Сейчас разговор крутился вокруг первой половины ХХ века, ставшей для России воистину дорогой на Голгофу. Генерала интересовало то, как увести страну с этого пути, и какова при этом должна быть роль армии.";
var el = document.getElementById("text")
el.innerHTML = text;
function findWord(event)
{ event.preventDefault();
var word = myform.search.value;
var target = "<b>" + word + "</b>";
var text2 = text;
var len = word.length;
var lenTarget = target.length
var pos = -1;
while(word && (pos = text2.indexOf(word, pos+1)) != -1)
{
text2 = text2.slice(0, pos) + target + text2.slice(pos+len) ;
pos+=lenTarget;
}
el.innerHTML = text2;
}
</script>
<form name="myform">
<p>Введите слово: </p>
<input type="text" name="search" value="кто"/>
<input type="submit" value="Найти" onclick="findWord(event)" />
</form>
</body>
</html>
vBulletin® v3.6.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd. Перевод: zCarot