Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
1446 / 354 / 32
Регистрация: 10.04.2009
Сообщений: 6,412
1

Поиск текста на странице с шрифтом красный и НЕ красный

10.01.2021, 21:09. Просмотров 987. Ответов 12
Метки нет (Все метки)

здравствуйте, подскажите
как сделать, вверху странички поле ввода и две кнопки Поиск
1-чтобы искало текст на странице шрифт у которого красный
2-чтобы искало текст на странице шрифт у которого НЕ красный без шквери? спс
на наводящие вопросы:
Текст с красным цветом обёрнут в span’ы со специальным классом, видимо? да
HTML5
1
<span style='color:red'>текст</span>
Это цветовое выделение — статическое, или оно само формируется в результате действия какого-то скрипта?
статичное
его ещё нет на питоне сверстаю выходной файл
но подстроиться под предлагаемое решение не сложно, спс
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
10.01.2021, 21:09
Ответы с готовыми решениями:

Светофор работает в следующем режиме: красный-жёлтый-зелёный-жёлтый-красный-жёлтый и т.д. Лампочки в светофоре не вечные
Светофор работает в следующем режиме: красный-жёлтый-зелёный-жёлтый-красный-жёлтый и т.д. Лампочки...

Работа с Word-файлом: изменить цвет всего текста на красный
необходимо изменить цвет всего текста на красный например=)

On mouse move поменять цвет текста "НАДПИСЬ1" на красный, VBA
Как поменять цвет надписи при наведении мышки на Надпись1 на красный цвет, в Access 2003 с помощу...

Красный R
Приветствую. Подскажите, что нужно импортировать, что бы R в строке setContentView(R.layout.main);...

12
741 / 347 / 99
Регистрация: 04.10.2018
Сообщений: 545
11.01.2021, 06:09 2
Привет Ципихович Эндрю,

без шквери

Javascript
1
2
3
4
5
6
7
8
9
10
11
document.querySelectorAll("span")
    .forEach(e => {
        if(e.style.color == "red"){
            //...
            console.log("red")
        }
        else{
            //...
            console.log("not red")
        }
    })
1
1446 / 354 / 32
Регистрация: 10.04.2009
Сообщений: 6,412
11.01.2021, 08:30  [ТС] 3
что-то не хочет работать.....
HTML5
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
<!DOCTYPE html>
<html lang ="ru">
<head>
<title>форум</title>
</head>
 
<script type="text/javascript">
document.querySelectorAll("span")
    .forEach(e => {
        if(e.style.color == "red"){
            //...
            console.log("red")
        }
        else{
            //...
            console.log("not red")
        }
    })
</script>
 
<body>
<body>
Рыбы и другие обитатели, <span style='color:red'>span style='color:red'>-текст-/span</span>
</body>
</body>
</html>
0
Модератор
2159 / 1388 / 428
Регистрация: 07.09.2019
Сообщений: 2,108
11.01.2021, 09:00 4
А в какой форме должны выводиться результаты поиска?
Я понял задачу так: проводится полноценный текстовый поиск, и совпадения с введённой юзером поисковой фразой выделяются в тексте страницы (например, подчёркиванием), но только в зависимости от принадлежности или не принадлежности фрагмента span’у со стилем. Если так, то для поиска красного текста возможен такой алгоритм: перебираем все span’ы (им лучше навесить класс, а не прописывать стиль инлайново, чтобы легче было их найти), в пределах textContent каждого подчёркиваем совпадения, используя регулярные выражения. Для поиска не красного текста такой вариант подходит не очень (разве что осуществлять двойную замену), поэтому не стал его предлагать.
0
1446 / 354 / 32
Регистрация: 10.04.2009
Сообщений: 6,412
11.01.2021, 10:10  [ТС] 5
Цитата Сообщение от DrType Посмотреть сообщение
совпадения с введённой юзером поисковой фразой
нет весь текст с красным цветом шрифта и с НЕ красным цветом шрифта и наверно, чтобы было меньше телодвижений сразу скопировало текст, то есть две кнопочки:
Скопировать весь текст с красным цветом шрифта
Скопировать весь текст с НЕ красным цветом шрифта
0
Модератор
2159 / 1388 / 428
Регистрация: 07.09.2019
Сообщений: 2,108
11.01.2021, 11:30 6
Увы, выяснил, что
Цитата Сообщение от learn.javascript.ru
Выделение может включать ноль или более диапазонов. По крайней мере, так утверждается в Спецификации Selection API. На практике же выделить несколько диапазонов в документе можно только в Firefox
Поэтому давайте пока без копирования. Сделал что-то такое (результат выводится в консоль):
HTML5
1
2
3
4
5
6
<body>
  Искать <button id="red" onclick="find('red')">красный</button><button id="not_red" onclick="find('notred')">не красный</button>
  <p id="text">
    Рыбы <span class='red_color'>и</span> другие обитатели, <span class='red_color'>текст</span>
  </p>
</body>
CSS
1
2
3
.red_color {
  color: red;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function find(color) {
  const text = document.getElementById("text"),
    spans = [...text.querySelectorAll("#text .red_color")],
    text_nodes = [...text.childNodes];
  const results = [];
  if (color == "red") {
    for (let span of spans) {
      results.push(span.textContent);
    }
  } else {
    for (let node of text_nodes) {
      if (!node.tagName) {
        results.push(node.textContent);
      } else if (!node.classList.contains("red_color")) {
        results.push(node.textContent);
      }
    }
  }
  console.log(results.join(" "));
}
0
1446 / 354 / 32
Регистрация: 10.04.2009
Сообщений: 6,412
11.01.2021, 11:47  [ТС] 7
Firefox-Ctrl+Shift+K
ну на безрыбье и .... спс
Цитата Сообщение от DrType Посмотреть сообщение
давайте пока без копирования
будет на десерт с копированием?
0
741 / 347 / 99
Регистрация: 04.10.2018
Сообщений: 545
11.01.2021, 17:27 8
Цитата Сообщение от Ципихович Эндрю Посмотреть сообщение
что-то не хочет работать.....
потому что скрипт срабатывает раньше чем в документе текст появляется,

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang ="ru">
<head>
<title>форум</title>
</head>
<body>
Рыбы и другие обитатели, <span style='color:red'>span style='color:red'>-текст-/span</span>
<script type="text/javascript">
document.querySelectorAll("span")
    .forEach(e => {
        if(e.style.color == "red"){
            //...
            console.log("red")
        }
        else{
            //...
            console.log("not red")
        }
    })
</script>
</body>
</html>
так ноу проблема
0
1446 / 354 / 32
Регистрация: 10.04.2009
Сообщений: 6,412
11.01.2021, 18:59  [ТС] 9
Цитата Сообщение от web_coder2 Посмотреть сообщение
так ноу проблема
открыл вижу только на странице
Рыбы и другие обитатели, span style='color:red'>-текст-/span
ни кнопок-ничего нет, как пользоваться?
пробовал в Лисе и Хроме, на чём нужно пробовать?
0
741 / 347 / 99
Регистрация: 04.10.2018
Сообщений: 545
12.01.2021, 00:47 10
Рыба кончилась но есть яблоки на снегу, надеюсь возьмете?

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        mark{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div>
    <input type="text" class="search">
    <button class="red">Red</button><button class="not-red">Not Red</button>
</div>
<div class="container-text">
<pre>
    <span>Яблоки на снегу - розовые на белом</span>
    <span style='color:red'>Что же нам с ними делать, с яблоками на снегу</span>
    <span>Яблоки на снегу в розовой нежной коже</span>
    <span>Ты им еще поможешь, я себе не могу</span>
 
    <span style='color:red'>Яблоки на снегу, яблоки на снегу</span>
    <span>Яблоки на снегу, яблоки на снегу</span>
    <span style='color:red'>Ты им еще поможешь, я себе не могу</span>
    <span style='color:red'>Ты им еще поможешь, я себе не могу</span>
 
    <span>Яблоки на снегу - так беззащитно мерзнут</span>
    <span style='color:red'>Словно былые весны, что в памяти берегу</span>
    <span style='color:red'>Яблоки на снегу медленно замерзают</span>
    <span style='color:red'>Ты их согрей слезами, я уже не могу</span>
 
    <span style='color:red'>Яблоки на снегу, яблоки на снегу</span>
    <span>Яблоки на снегу, яблоки на снегу</span>
    <span style='color:red'>Ты их согрей слезами, я уже не могу</span>
 
    <span style='color:red'>Ты их согрей слезами, я уже не могу</span>
 
    <span style='color:red'>Яблоки на снегу - я их снимаю с веток</span>
    <span style='color:red'>Светят прощальным светом яблоки на снегу</span>
 
    <span style='color:red'>Яблоки на снегу, яблоки на снегу</span>
    <span style='color:red'>Яблоки на снегу, яблоки на снегу</span>
    <span style='color:red'>Что же нам с ними делать, с яблоками на снегу</span>
    <span style='color:red'>Светят прощальным светом яблоки на снегу</span>
</pre>
 
</div>
 
<script>
document.querySelector("button.red").onclick = search
document.querySelector("button.not-red").onclick = search
function search(e) {
    let search_text = document.querySelector(".search").value.trim();
 
    let red = e.target.classList.contains("red")
 
    document.querySelectorAll(".container-text span").forEach(e => {
            e.innerHTML = e.innerHTML.replace(/(<([^>]+)>)/gi, "");
            let highlight = _ => e.innerHTML.replace(RegExp(search_text,"g"), `<mark>${search_text}</mark>`);
            if(red){
                if(e.style.color == "red"){
                    e.innerHTML = highlight()
                }
            }
            else{
                if(e.style.color != "red"){
                    e.innerHTML = highlight()
                }
            }
        })
}
</script>
</body>
</html>
Добавлено через 3 минуты
Стихи не мои автор Михаил Владимирович Муромов

Добавлено через 8 минут
Цитата Сообщение от Ципихович Эндрю Посмотреть сообщение
ни кнопок-ничего нет, как пользоваться?
— Пееейн! Я ног не чувствую…
А я ему:
— Буба, у Тебя их нет!

2
1446 / 354 / 32
Регистрация: 10.04.2009
Сообщений: 6,412
12.01.2021, 13:11  [ТС] 11
стихи тоже люблю, спасибо
но ни Хром Ни Лиса не дали возможности скопировать выделенное-можно добавить эту возможность?
также я же говорил
Цитата Сообщение от Ципихович Эндрю Посмотреть сообщение
совпадения с введённой юзером поисковой фразой
не нужно, ну сделали пусть будет, только тогда сделайте пжл-точка или звёздочка или восклицательный знак-что уж Вам по нраву, при вводе их в поле-чтобы работало как любое количество знаков, спс
0
741 / 347 / 99
Регистрация: 04.10.2018
Сообщений: 545
13.01.2021, 01:27 12
Шутки кончились, пора дать серьезный ответ xD
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        mark{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div>
    <input type="text" class="search">
    <button class="red">Red</button><button class="not-red">Not Red</button>
</div>
<div class="container-text">
<pre>
    <span>Яблоки на снегу - розовые на белом</span>
    <span style='color:red'>Что же нам с ними делать, с яблоками на снегу</span>
    <span>Яблоки на снегу в розовой нежной коже</span>
    <span>Ты им еще поможешь, я себе не могу</span>
 
    <span style='color:red'>Яблоки на снегу, яблоки на снегу</span>
    <span>Яблоки на снегу, яблоки на снегу</span>
    <span style='color:red'>Ты им еще поможешь, я себе не могу</span>
    <span style='color:red'>Ты им еще поможешь, я себе не могу</span>
 
    <span>Яблоки на снегу - так беззащитно мерзнут</span>
    <span style='color:red'>Словно былые весны, что в памяти берегу</span>
    <span style='color:red'>Яблоки на снегу медленно замерзают</span>
    <span style='color:red'>Ты их согрей слезами, я уже не могу</span>
 
    <span style='color:red'>Яблоки на снегу, яблоки на снегу</span>
    <span>Яблоки на снегу, яблоки на снегу</span>
    <span style='color:red'>Ты их согрей слезами, я уже не могу</span>
 
    <span style='color:red'>Ты их согрей слезами, я уже не могу</span>
 
    <span style='color:red'>Яблоки на снегу - я их снимаю с веток</span>
    <span style='color:red'>Светят прощальным светом яблоки на снегу</span>
 
    <span style='color:red'>Яблоки на снегу, яблоки на снегу</span>
    <span style='color:red'>Яблоки на снегу, яблоки на снегу</span>
    <span style='color:red'>Что же нам с ними делать, с яблоками на снегу</span>
    <span style='color:red'>Светят прощальным светом яблоки на снегу</span>
</pre>
 
</div>
<script>
document.querySelector("button.red").onclick = search
document.querySelector("button.not-red").onclick = search
function search(e) {
    let search_text = document.querySelector(".search").value.trim();
 
    let red = e.target.classList.contains("red")
 
    let clip = []
    document.querySelectorAll(".container-text span").forEach(e => {
            let textForClip = e.innerHTML.replace(/(<([^>]+)>)/gi, "");
            e.innerHTML = textForClip //clear marks
            let p = _ => {
                e.innerHTML = e.innerHTML.replace(RegExp(search_text,"g"), `<mark>${search_text}</mark>`)
                clip.push(textForClip)
            }
            // insert marks and copy text for clipboard
            if(e.style.color == "red" && red) p(); else if(e.style.color != "red") p()
        })
    //copy to clipboard
    navigator.clipboard.writeText(clip.join("\n")).then(
        _ => alert(`Скопировано в буфер ${clip.length} элементов, нажмите CTRL+V для вставки`),
        e => alert(`Произошла ошибка копирования в буфер: ${e.message}`))
}
</script>
</body>
</html>
Добавлено через 1 минуту
Ципихович Эндрю,
нужно запускать на сервере с https иначе navigator.clipboard undefined

Добавлено через 1 час 12 минут
Поправил ошибки, забыл что мы вообще текст ищем, и в условии поиска накосячил

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        mark{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div>
    <input type="text" class="search">
    <button class="red">Red</button><button class="not-red">Not Red</button>
</div>
<div class="container-text">
<pre>
    <span>Яблоки на снегу - розовые на белом</span>
    <span style='color:red'>Что же нам с ними делать, с яблоками на снегу</span>
    <span>Яблоки на снегу в розовой нежной коже</span>
    <span>Ты им еще поможешь, я себе не могу</span>
 
    <span style='color:red'>Яблоки на снегу, яблоки на снегу</span>
    <span>Яблоки на снегу, яблоки на снегу</span>
    <span style='color:red'>Ты им еще поможешь, я себе не могу</span>
    <span style='color:red'>Ты им еще поможешь, я себе не могу</span>
 
    <span>Яблоки на снегу - так беззащитно мерзнут</span>
    <span style='color:red'>Словно былые весны, что в памяти берегу</span>
    <span style='color:red'>Яблоки на снегу медленно замерзают</span>
    <span style='color:red'>Ты их согрей слезами, я уже не могу</span>
 
    <span style='color:red'>Яблоки на снегу, яблоки на снегу</span>
    <span>Яблоки на снегу, яблоки на снегу</span>
    <span style='color:red'>Ты их согрей слезами, я уже не могу</span>
 
    <span style='color:red'>Ты их согрей слезами, я уже не могу</span>
 
    <span style='color:red'>Яблоки на снегу - я их снимаю с веток</span>
    <span style='color:red'>Светят прощальным светом яблоки на снегу</span>
 
    <span style='color:red'>Яблоки на снегу, яблоки на снегу</span>
    <span style='color:red'>Яблоки на снегу, яблоки на снегу</span>
    <span style='color:red'>Что же нам с ними делать, с яблоками на снегу</span>
    <span style='color:red'>Светят прощальным светом яблоки на снегу</span>
</pre>
 
</div>
<dialog id="dialog">
</dialog>
<script>
document.querySelector("button.red").onclick = search
document.querySelector("button.not-red").onclick = search
function search(e) {
    if(!navigator.clipboard)
        alert("navigator.clipboard undefined запустите пример на сервере с https")
    let search_text = document.querySelector(".search").value.trim();
 
    let red = e.target.classList.contains("red")
 
    let clip = []
    document.querySelectorAll(".container-text span").forEach(e => {
            let textForClip = e.innerHTML.replace(/(<([^>]+)>)/gi, "");
            e.innerHTML = textForClip //clear marks
            let p = _ => {
                if(textForClip.includes(search_text)){
                    e.innerHTML = e.innerHTML.replace(RegExp(search_text,"g"), `<mark>${search_text}</mark>`)
                    clip.push(textForClip)
                }
            }
            // insert marks
            if(red){
                if(e.style.color == "red") p()
            }
            else if(e.style.color != "red") p()
        })
    //copy to clipboard
    navigator.clipboard.writeText(clip.join("\n")).then(
        _ => alert(`Скопировано в буфер ${clip.length} элементов, жмите CTRL+V чтобы увидеть что там`),
        e => alert(`Произошла ошибка копирования в буфер: ${e.message}`))
}
</script>
</body>
</html>
1
1446 / 354 / 32
Регистрация: 10.04.2009
Сообщений: 6,412
13.01.2021, 08:40  [ТС] 13
спасибо
Цитата Сообщение от web_coder2 Посмотреть сообщение
нужно запускать на сервере с https иначе navigator.clipboard undefined
я на Лисе запускал в файле-всё хорошо
а если по мотивам ПДД?
можно сделать-добавить жёлтый и зелёный?
ну пока ошибки такие:
жму НЕ красный, выделяет правильно, но в буфере не гут:
Три цвета есть у светофора.
цвет - проезда нет.

если жму красный-говорит 0

жму НЕ красный-говорит 2, но не подсвечивает и в буфере не гут (чуть выше писал-другая реакция):
Три цвета есть у светофора.
цвет - проезда нет.


HTML5
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<!--
Поиск текста на странице с шрифтом красный и НЕ красный
https://www.cyberforum.ru/javascript/thread2767362.html
-->
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        mark{
            background-color: pink;<!--Pink-розовый-подсветка текста-->
        }
    </style>
</head>
<body>
<div>
    <input type="text" class="search">
    <button class="red">Red-красный</button>
    <button class="red">Yellow-желтый</button>
    <button class="red">Green-зеленый</button>
    <button class="not-red">Not Red-Не красный</button>
</div>
<div class="container-text">
<pre>
<span>Три цвета есть у светофора.</span>
<span>Они понятны для шофера:</span>
<span style='color:red'>Красный</span> <span>цвет - проезда нет.</span>
<span style='color:yellow'>Желтый</span> <span>– будь готов к пути,</span>
<span>А</span> <span style='color:green'>зеленый</span> <span>свет – кати!</span>
</pre>
</div>
<dialog id="dialog">
</dialog>
<script>
document.querySelector("button.red").onclick = search
document.querySelector("button.not-red").onclick = search
function search(e) {
    if(!navigator.clipboard)
        alert("navigator.clipboard undefined запустите пример на сервере с https")
    let search_text = document.querySelector(".search").value.trim();
 
    let red = e.target.classList.contains("red")
 
    let clip = []
    document.querySelectorAll(".container-text span").forEach(e => {
            let textForClip = e.innerHTML.replace(/(<([^>]+)>)/gi, "");
            e.innerHTML = textForClip //clear marks
            let p = _ => {
                if(textForClip.includes(search_text)){
                    e.innerHTML = e.innerHTML.replace(RegExp(search_text,"g"), `<mark>${search_text}</mark>`)
                    clip.push(textForClip)
                }
            }
            // insert marks
            if(red){
                if(e.style.color == "red") p()
            }
            else if(e.style.color != "red") p()
        })
    //copy to clipboard
    navigator.clipboard.writeText(clip.join("\n")).then(
        _ => alert(`Скопировано в буфер ${clip.length} элементов, жмите CTRL+V чтобы увидеть что там`),
        e => alert(`Произошла ошибка копирования в буфер: ${e.message}`))
}
</script>
</body>
</html>
спасибо
спасибо
спасибо
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
13.01.2021, 08:40

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

Красный экран
Вылетает красный экран, в некоторых играх. Например могу часами играть в Battelfield 1, но стоит...

Красный крест
Какое событие происходит, когда чувак закрывает форму через красный крест или как это определить?

красный квадрат
надо рисовать красный квадрат на паскале

Поиск в Word участков текста с заданным шрифтом
Можно ли написать процедуру для поиска в Word текста с указанным шрифтом, например, Arial? В Word...

Красный экран монитора
В дежурном режыме без сигнала вместо черного фона на мониторе красный фон! И при просмотре видео на...

Синий или красный?
требуется купить Rfid считыватель, но меня пугает цвет, вроде все детали были красными, ничего что...


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

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

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