Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/50: Рейтинг темы: голосов - 50, средняя оценка - 4.80
28 / 9 / 1
Регистрация: 16.11.2011
Сообщений: 340
1

Поиск и выделение текста

28.06.2013, 14:36. Просмотров 9870. Ответов 6
Метки нет (Все метки)

Всем привет, подскажите пожалуйста с функцией, хочу сделать что бы текст который вбивает пользователь высвечивался бы с тэгом <b>. То есть вписал 'слон' он нашел в тексте это слово и выделил его жирным, и так всех слонов которых можно найти в тексте. Только без глобальной замены такой как str.replace(/слон/g,"<b>слон</b>")
Вот сообственно сама функция, подскажите пожалуйста как это сделать, уже голову себе сломал.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function findText() {
            var fullText = document.getElementById('full_text').innerHTML;
            var textToFind = document.getElementById('text_to_find').value;
            if (pos != -1) {
 
 
                var pos = fullText.indexOf(textToFind);
                while (pos != -1) {
                    //найти слово выделить его тэгом <b> и продолжить искать дальше еще такие слова и то же их выделять и потом вывести текст с жирными слонами :))
                    fullText = fullText.replace(fullText.substr(pos, textToFind.length), "<b>" +textToFind+ "</b>");
                    pos = fullText.indexOf(textToFind,pos+1);
                }
                document.getElementById("full_text").innerHTML = fullText;
            } else {
                alert('Ничего не найдено');
 
            }
 
 
        }
Добавлено через 1 час 5 минут
Даладно народ, я знаю что вы знаете как это сделать Это принципиально для меня, или я не смогу дальше жить Я уже часами думал и нече не придумал, хээлп
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.06.2013, 14:36
Ответы с готовыми решениями:

выделение текста
подскажите как делают такие красивые меню с изменением цвета например как в myspace.com,...

Выделение строки из текста
Всем привет! Вопрос такой: возможно ли с помощью javascript выделить строку из текста в textarea. ...

Выделение текста CSS по умолчанию
Постараюсь написать так, чтобы было понятно сразу. Скажите пожалуйста, в принципе возможно ли,...

Выделение фрагмента текста в textarea
Как это возможно сделать? Вот как я делал выделение текста в теге, но такой не канает на...

6
425 / 167 / 48
Регистрация: 05.12.2012
Сообщений: 855
28.06.2013, 14:53 2
@Jimmbo, самое простое, что приходит на ум:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var textOriginal = "", textDiv = null;
 
function findText(){
    var string = prompt("Введите символ для поиска",""), text = "";
     
if(string === undefined || string === null || string === "") return;
              
    var arr = textOriginal.split(string), i = 0, len = arr.length - 1;
                    
    for(; i < len; i++){
            text += arr[i];
            text += "<span style='color:red; font-weight:bold'>" + string + "</span>";
    }
        
    text += arr[i];
    textDiv.innerHTML = text; 
}
 
function clear() {
        textDiv.innerHTML = textOriginal;
}
 
window.onload = function() {
        textDiv = document.getElementById("text");
        textOriginal = textDiv.innerHTML;
}
HTML5
1
2
3
<div id="text">Lorem ipsum — название классического текста-«рыбы». «Рыба» — слово из жаргона дизайнеров, обозначает условный, зачастую бессмысленный текст, вставляемый в макет страницы. Lorem ipsum представляет собой искажённый отрывок из философского трактата Цицерона «О пределах добра и зла», написанного в 45 году до нашей эры на латинском языке. Впервые этот текст был применен для набора шрифтовых образцов неизвестным печатником в XVI веке.
</div>
<p><a href="#" onclick="clear(); findText()">Найти строку</a></p>
1
28 / 9 / 1
Регистрация: 16.11.2011
Сообщений: 340
28.06.2013, 16:47  [ТС] 3
Спасибо, тоже как вариант. А можно плз с использованием indexOf, чтоб по позициям как бы. Просто хотел это освоить и вот как то не получаеться
0
1446 / 354 / 32
Регистрация: 10.04.2009
Сообщений: 6,412
10.01.2021, 18:58 4
здравствуйте, подскажите, почему предложенное у меня на конечном коде на работает?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang ="ru">
<head>
<title>форум</title>
</head>
<script type="text/javascript">
var textOriginal = "", textDiv = null;
 
function findText(){
    var string = prompt("Введите символ для поиска",""), text = "";
     
if(string === undefined || string === null || string === "") return;
              
    var arr = textOriginal.split(string), i = 0, len = arr.length - 1;
                    
    for(; i < len; i++){
            text += arr[i];
            text += "<span style='color:red; font-weight:bold'>" + string + "</span>";
    }
        
    text += arr[i];
    textDiv.innerHTML = text; 
}
 
function clear() {
        textDiv.innerHTML = textOriginal;
}
 
window.onload = function() {
        textDiv = document.getElementById("text");
        textOriginal = textDiv.innerHTML;
}
</script>
<body>
<a href="#" onclick="clear(); findText()">Найти строку</a></p>
Рыбы и другие обитатели
</body>
</html>
а главный то вопрос, как сделать, чтобы искало текст шрифт у которого например красный и любой но НЕ красный? спс
0
Модератор
2159 / 1388 / 428
Регистрация: 07.09.2019
Сообщений: 2,108
10.01.2021, 19:59 5
Ципихович Эндрю, потому что в разметке нет элемента с id text, и после выполнения 30 строчки textDiv по-прежнему null.
HTML5
1
2
3
4
<body>
  <a href="#" onclick="clear(); findText()">Найти строку</a></p>
  <p id="text">Рыбы и другие обитатели</p>
</body>
Это что касается первого вопроса...
1
1446 / 354 / 32
Регистрация: 10.04.2009
Сообщений: 6,412
10.01.2021, 20:10 6
ну-да, согласен, а что скажете по
Цитата Сообщение от Ципихович Эндрю Посмотреть сообщение
главный то вопрос, как сделать, чтобы искало текст шрифт у которого например красный и любой но НЕ красный? спс
0
Модератор
2159 / 1388 / 428
Регистрация: 07.09.2019
Сообщений: 2,108
10.01.2021, 20:45 7
Текст с красным цветом обёрнут в span’ы со специальным классом, видимо? Это цветовое выделение — статическое, или оно само формируется в результате действия какого-то скрипта?
Приложите кусочек html-разметки.
И лучше, пожалуй, создать новую тему, потому что теперь метод решения будет, скорее всего, другим.

UPD. Продолжение в теме Поиск текста на странице с шрифтом красный и НЕ красный.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
10.01.2021, 20:45

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Запрет на выделение текста в таблице
Как средствами JavaScript запретить выделять текст в ячейке таблицы ?

Выделение части текста в textarea
Такая задача: есть текстовое поле &lt;textarea&gt; и в нем некоторый текст. Нужно получить выделенную...

Выделение текста при наведении курсора
Здравствуйте. Я не совсем уверен, что пишу на нужную ветку форума (не уверен, что это js),...

Выделение текста в блоке и занесение его в input
Есть два блока в них текст, как сделать что бы выделил часть текста в блоке и он оказался в нужном...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.