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

@Ципихович Эндрю · Регистрация: 10.04.2009

здравствуйте, подскажите
как сделать, вверху странички поле ввода и две кнопки Поиск
1-чтобы искало текст на странице шрифт у которого красный
2-чтобы искало текст на странице шрифт у которого НЕ красный без шквери? спс
на наводящие вопросы:
Текст с красным цветом обёрнут в span’ы со специальным классом, видимо? да

HTML5

1	<span style='color:red'>текст</span>

Это цветовое выделение — статическое, или оно само формируется в результате действия какого-то скрипта?
статичное
его ещё нет на питоне сверстаю выходной файл
но подстроиться под предлагаемое решение не сложно, спс

@web_coder2 · 11.01.2021, 06:09

Привет Ципихович Эндрю,

без шквери

Javascript

document.querySelectorAll("span")
    .forEach(e => {
        if(e.style.color == "red"){
            //...
            console.log("red")
        }
        else{
            //...
            console.log("not red")
        }
    })

@Ципихович Эндрю · 11.01.2021, 08:30 **[ТС]**

что-то не хочет работать.....

HTML5

<!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>

@DrType · 11.01.2021, 09:00

А в какой форме должны выводиться результаты поиска?
Я понял задачу так: проводится полноценный текстовый поиск, и совпадения с введённой юзером поисковой фразой выделяются в тексте страницы (например, подчёркиванием), но только в зависимости от принадлежности или не принадлежности фрагмента span’у со стилем. Если так, то для поиска красного текста возможен такой алгоритм: перебираем все span’ы (им лучше навесить класс, а не прописывать стиль инлайново, чтобы легче было их найти), в пределах textContent каждого подчёркиваем совпадения, используя регулярные выражения. Для поиска не красного текста такой вариант подходит не очень (разве что осуществлять двойную замену), поэтому не стал его предлагать.

@Ципихович Эндрю · 11.01.2021, 10:10 **[ТС]**

Сообщение от DrType

совпадения с введённой юзером поисковой фразой

нет весь текст с красным цветом шрифта и с НЕ красным цветом шрифта и наверно, чтобы было меньше телодвижений сразу скопировало текст, то есть две кнопочки:
Скопировать весь текст с красным цветом шрифта
Скопировать весь текст с НЕ красным цветом шрифта

@DrType · 11.01.2021, 11:30

Увы, выяснил, что

Сообщение от learn.javascript.ru

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

Поэтому давайте пока без копирования. Сделал что-то такое (результат выводится в консоль):

HTML5

<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

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(" "));
}

@Ципихович Эндрю · 11.01.2021, 11:47 **[ТС]**

Firefox-Ctrl+Shift+K
ну на безрыбье и .... спс

Сообщение от DrType

давайте пока без копирования

будет на десерт с копированием?

@web_coder2 · 11.01.2021, 17:27

Сообщение от Ципихович Эндрю

что-то не хочет работать.....

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

PHP/HTML

<!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>

так ноу проблема

@Ципихович Эндрю · 11.01.2021, 18:59 **[ТС]**

Сообщение от web_coder2

так ноу проблема

открыл вижу только на странице
Рыбы и другие обитатели, span style='color:red'>-текст-/span
ни кнопок-ничего нет, как пользоваться?
пробовал в Лисе и Хроме, на чём нужно пробовать?

@web_coder2 · 12.01.2021, 00:47

Рыба кончилась но есть яблоки на снегу, надеюсь возьмете?

PHP/HTML

<!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 минут

Сообщение от Ципихович Эндрю

ни кнопок-ничего нет, как пользоваться?

— Пееейн! Я ног не чувствую…
А я ему:
— Буба, у Тебя их нет!

@Ципихович Эндрю · 12.01.2021, 13:11 **[ТС]**

стихи тоже люблю, спасибо
но ни Хром Ни Лиса не дали возможности скопировать выделенное-можно добавить эту возможность?
также я же говорил

Сообщение от Ципихович Эндрю

совпадения с введённой юзером поисковой фразой

не нужно, ну сделали пусть будет, только тогда сделайте пжл-точка или звёздочка или восклицательный знак-что уж Вам по нраву, при вводе их в поле-чтобы работало как любое количество знаков, спс

@web_coder2 · 13.01.2021, 01:27

Шутки кончились, пора дать серьезный ответ xD

PHP/HTML

<!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

<!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>

@Ципихович Эндрю · 13.01.2021, 08:40 **[ТС]**

спасибо

Сообщение от web_coder2

нужно запускать на сервере с https иначе navigator.clipboard undefined

я на Лисе запускал в файле-всё хорошо
а если по мотивам ПДД?
можно сделать-добавить жёлтый и зелёный?
ну пока ошибки такие:
жму НЕ красный, выделяет правильно, но в буфере не гут:
Три цвета есть у светофора.
цвет - проезда нет.

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

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

HTML5

<!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>

спасибо
спасибо
спасибо

@DrType Модератор 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

@Ципихович Эндрю 1446 / 354 / 32 Регистрация: 10.04.2009 Сообщений: 6,412
	11.01.2021, 11:47 [ТС]	7
	Firefox-Ctrl+Shift+K ну на безрыбье и .... спс Сообщение от DrType давайте пока без копирования будет на десерт с копированием? 0

@Ципихович Эндрю 1446 / 354 / 32 Регистрация: 10.04.2009 Сообщений: 6,412
	11.01.2021, 18:59 [ТС]	9
	Сообщение от web_coder2 так ноу проблема открыл вижу только на странице Рыбы и другие обитатели, span style='color:red'>-текст-/span ни кнопок-ничего нет, как пользоваться? пробовал в Лисе и Хроме, на чём нужно пробовать? 0

@Ципихович Эндрю 1446 / 354 / 32 Регистрация: 10.04.2009 Сообщений: 6,412
	12.01.2021, 13:11 [ТС]	11
	стихи тоже люблю, спасибо но ни Хром Ни Лиса не дали возможности скопировать выделенное-можно добавить эту возможность? также я же говорил Сообщение от Ципихович Эндрю совпадения с введённой юзером поисковой фразой не нужно, ну сделали пусть будет, только тогда сделайте пжл-точка или звёздочка или восклицательный знак-что уж Вам по нраву, при вводе их в поле-чтобы работало как любое количество знаков, спс 0