• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

zaznaczenie częsci wyrazów w wierszu na inny kolor

VPS Starter Arubacloud
+1 głos
586 wizyt
pytanie zadane 14 czerwca 2021 w HTML i CSS przez japac Nowicjusz (150 p.)
może ktoś wspomóc wiedza, jak w CSS zaznaczyć część na inny kolor część tekstu znajdująca się pomiędzy określonymi znakami? jak zmienić kolor całego tekstu wiem, ale nie mam kompletnie pojęcia, jak zmienić kolor części tekstu w tekście.

przykład: muszę zmienić kolor tekstu, który zawsze znajduje się pomiędzy kwadratowymi nawiasami:
Morze [[Bałtyckie, Martwe, Barentsa]] ma największe zasolenie?

wie ktoś jak to zrobić?

2 odpowiedzi

+5 głosów
odpowiedź 14 czerwca 2021 przez pablop76 VIP (123,060 p.)

Użyj span

komentarz 14 czerwca 2021 przez japac Nowicjusz (150 p.)
a jestes w stanie mi to napisac, jako linijakę kodu do przeklejenia? moja wiedza z programowania ma charakter rachityczny
1
komentarz 14 czerwca 2021 przez pablop76 VIP (123,060 p.)
edycja 14 czerwca 2021 przez pablop76
Morze <span claas="name-color">Bałtyckie, Martwe, Barentsa</span> ma największe zasolenie?
.name-color{
color: red;
}

 

komentarz 14 czerwca 2021 przez japac Nowicjusz (150 p.)
hmmm… dla tego przypadku zadziala. ale jak podmienie zawartosc nawiasow, to juz nie zadziala?

potrzebuje ogolnej zasady, ktora bedzie mi zmieniac zawartosc pomiedzy nawiasami niezaleznie od zawartosci. da sie cos takiego zrobic?
1
komentarz 14 czerwca 2021 przez pablop76 VIP (123,060 p.)
edycja 14 czerwca 2021 przez pablop76

Nie rozumiem. Nie ma znaczenia co będzie między nawiasami.

Morze <span claas="name-color">[[Bałtyckie, Martwe, Barentsa]]</span> ma największe zasolenie?

 

0 głosów
odpowiedź 14 czerwca 2021 przez VBService Ekspert (251,210 p.)
edycja 14 czerwca 2021 przez VBService

Można też "zaprząc do pracy" js-a  wink  np.:

 

<body>
  <p>Lorem [ipsum dolor sit amet], consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [Ut enim ad minim veniam], quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse [cillum dolore eu fugiat nulla] pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem [accusantium doloremque laudantium], totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi [architecto beatae] vitae dicta sunt explicabo.</p>
</body>
.text-red {
  color: red;
}

/* dla demonstarcji */
p {
  width: 60vw;
  margin: 1em auto;
  padding: 1em;
  background-color: silver;
}
document.addEventListener('DOMContentLoaded', () => {
  const body = document.body;
  
  body.innerHTML = body.innerHTML.replace(/\[/g, '[<span class="text-red">');
  body.innerHTML = body.innerHTML.replace(/\]/g, '</span>]');
});

1
komentarz 15 czerwca 2021 przez Comandeer Guru (599,730 p.)

Nie polecam tego sposobu, bo nadpisuje cały DOM strony i np. można stracić focus albo zawartość formularza. Przy okazji zostaną odpięte wszystkie event listenery dla elementów wewnątrz body.

komentarz 15 czerwca 2021 przez VBService Ekspert (251,210 p.)
edycja 15 czerwca 2021 przez VBService

Może zbyt ogólnikowy podałem przykład odwołując się do body.  smiley

Ten przykład odwołuje się do konkretnych "bloków" tekstu nie nadpisuje całego DOM-u.

<!DOCTYPE html>
<html>

<head>

    <style>
        .text-red {
          color: red;
        }


        /* dla demonstarcji */
        * {
          box-sizing: border-box;
        }
        div, p {
          width: 60vw;
          margin: 1em auto;
          padding: 1em;
          background-color: silver;
        }
        input {
          display: block;
        }
        input[type="submit"] {
            margin: 1em 0;
        }
    </style>
</head>

<body>
  <div>
    <form id="user_form">
      <label for="f_name">First name:</label>
      <input type="text" id="f_name" name="f_name" autofocus>
      <label for="l_name">Last name:</label>
      <input type="text" id="l_name" name="l_name">
      <input type="submit">
    </form>
  </div>

  <p class="square-brackets">Lorem [ipsum dolor sit amet], consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [Ut enim ad minim veniam], quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p class="square-brackets">Duis aute irure dolor in reprehenderit in voluptate velit esse [cillum dolore eu fugiat nulla] pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Quis [autem vel eum iure] reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  <p class="square-brackets">Sed ut perspiciatis unde omnis iste natus error sit voluptatem [accusantium doloremque laudantium], totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi [architecto beatae] vitae dicta sunt explicabo.</p>
  
  <div class="square-brackets">Quis [autem vel eum iure] reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>

  <div>
    <button>Test Listener 1</button>
    <button>Test Listener 2</button>
    <button>Test Listener 3</button>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      [...document.querySelectorAll('button')].forEach(button => {
        button.addEventListener('click', ({target}) => {
          alert(target.textContent);
        })
      });

      square_brackets_coloring_text();
    });

    function square_brackets_coloring_text() {
      const p_tags = document.querySelectorAll('p.square-brackets');
      p_tags.forEach(item => {
        item.innerHTML = item.innerHTML.replace(/\[/g, `[<span class="text-red">`);
        item.innerHTML = item.innerHTML.replace(/\]/g, '</span>]');
      });
    }
  </script>

</body>
</html>

komentarz 15 czerwca 2021 przez Comandeer Guru (599,730 p.)
edycja 15 czerwca 2021 przez Comandeer

A co jak w jakimś elemencie .square-brackets będzie oskryptowany przycisk? Lepiej byłoby zrobić IMO rekurencyjny skrypt który przeszedłby po wszystkich węzłach tekstowych w danym elemencie i jego potomkach, zrobił na nich split w miejscu wystąpienia nawiasów i takie nowo powstałe węzły otoczył spanami. PoC: https://codepen.io/Comandeer/pen/JjWwegR

komentarz 15 czerwca 2021 przez VBService Ekspert (251,210 p.)

Ja wiem, że masz dużą wiedzę, poparta wieloletnią praktyką, ale chyba przesadzasz trochę z tym komikowaniem kodu, bo replace (i banalnie prosty regexpna innerHTML "rodzica" pobranego za pomocą document.querySelectorAll('p.square-brackets') spełnia swoje zadanie.  smiley

<!DOCTYPE html>
<html>
 
<head>
 
    <style>
        .text-red {
          color: red;
        }
 
 
        /* dla demonstarcji */
        * {
          box-sizing: border-box;
        }
        div, p {
          width: 60vw;
          margin: 1em auto;
          padding: 1em;
          background-color: silver;
        }
        input {
          display: block;
        }
        input[type="submit"] {
            margin: 1em 0;
        }
    </style>
</head>
 
<body>
  <div>
    <form id="user_form">
      <label for="f_name">First name:</label>
      <input type="text" id="f_name" name="f_name" autofocus>
      <label for="l_name">Last name:</label>
      <input type="text" id="l_name" name="l_name">
      <input type="submit">
    </form>
  </div>
 
  <p class="square-brackets">Lorem [ipsum dolor sit amet], consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [Ut enim ad minim veniam], quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p class="square-brackets">Duis aute irure dolor in reprehenderit in voluptate velit esse [cillum dolore eu fugiat nulla] pariatur. Excepteur sint <strong>[dicta] numquam?</strong> occaecat cupidatat non proident, sunt in culpa qui officia deserunt <button>[Vel]</button> mollit anim id est laborum.</p>
  <p>Quis [autem vel eum iure] reprehenderit qui in ea voluptate velit esse quam nihil  <button>[Vel]</button> molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  <p class="square-brackets">Sed ut perspiciatis unde omnis iste natus error sit voluptatem [accusantium doloremque laudantium], totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi [architecto beatae] vitae dicta sunt explicabo.</p>
   
  <div class="square-brackets">Quis [autem vel eum iure] reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
 
  <div>
    <button>Test Listener 1</button>
    <button>Test Listener 2</button>
    <button>Test Listener 3</button>
  </div>
 
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      [...document.querySelectorAll('button')].forEach(button => {
        button.addEventListener('click', ({target}) => {
          alert(target.textContent);
        })
      });
 
      square_brackets_coloring_text();
    });
 
    function square_brackets_coloring_text() {
      const p_tags = document.querySelectorAll('p.square-brackets');
      p_tags.forEach(item => {
        item.innerHTML = item.innerHTML.replace(/\[/g, `[<span class="text-red">`);
        item.innerHTML = item.innerHTML.replace(/\]/g, '</span>]');
      });
    }
  </script>
 
</body>
</html>

komentarz 15 czerwca 2021 przez Comandeer Guru (599,730 p.)

Ja wiem, że masz dużą wiedzę, poparta wieloletnią praktyką, ale chyba przesadzasz trochę z tym komikowaniem kodu

Tylko że właśnie po to mi ta wiedza i wieloletnia praktyka, by nie komplikować tego, co nie musi być komplikowanie, i bardziej złożone rozwiązania zostawić na specjalne okazje. Takie jak ta. W Twoim kodzie przycisk w ostylowanym akapicie przestał działać – bo go nadpisałeś nowym przyciskiem. W moim kodzie przycisk działa cały czas – bo mutuję węzły tekstowe wokół niego, a nie sam przycisk. 

komentarz 15 czerwca 2021 przez VBService Ekspert (251,210 p.)

W Twoim kodzie przycisk w ostylowanym akapicie przestał działać

smiley

<!DOCTYPE html>
<html>
  
<head>
  
    <style>
        .text-red {
          color: red;
        }
  
  
        /* dla demonstarcji */
        * {
          box-sizing: border-box;
        }
        div, p {
          width: 60vw;
          margin: 1em auto;
          padding: 1em;
          background-color: silver;
        }
        input {
          display: block;
        }
        input[type="submit"] {
            margin: 1em 0;
        }
    </style>
</head>
  
<body>
  <div>
    <form id="user_form">
      <label for="f_name">First name:</label>
      <input type="text" id="f_name" name="f_name" autofocus>
      <label for="l_name">Last name:</label>
      <input type="text" id="l_name" name="l_name">
      <input type="submit">
    </form>
  </div>
  
  <p class="square-brackets">Lorem [ipsum dolor sit amet], consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [Ut enim ad minim veniam], quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p class="square-brackets">Duis aute irure dolor in reprehenderit in voluptate velit esse [cillum dolore eu fugiat nulla] pariatur. Excepteur sint <strong>[dicta] numquam?</strong> occaecat cupidatat non proident, sunt in culpa qui officia deserunt <button>[Vel]</button> mollit anim id est laborum.</p>
  <p>Quis [autem vel eum iure] reprehenderit qui in ea voluptate velit esse quam nihil  <button>[Test Listener 4]</button> molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  <p class="square-brackets">Sed ut perspiciatis unde omnis iste natus error sit voluptatem [accusantium doloremque laudantium], totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi [architecto beatae] vitae dicta sunt explicabo.</p>
    
  <div class="square-brackets">Quis [autem vel eum iure] reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
  
  <div>
    <button>Test Listener 1</button>
    <button>Test Listener 2</button>
    <button>Test Listener 3</button>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      [...document.querySelectorAll('button')].forEach(button => {
        button.addEventListener('click', ({target}) => {
          alert(target.textContent);
        })
      });
      
      square_brackets_coloring_text();
    });
  
    function square_brackets_coloring_text() {
      const p_tags = document.querySelectorAll('p.square-brackets');
      p_tags.forEach(item => {
        item.innerHTML = item.innerHTML.replace(/\[/g, `[<span class="text-red">`);
        item.innerHTML = item.innerHTML.replace(/\]/g, '</span>]');
      });
      
      square_brackets_button_event();
    }
    
    function square_brackets_button_event() {
      [...document.querySelectorAll('p.square-brackets button')].forEach(button => {
        button.addEventListener('click', ({target}) => {
          alert(`${target.textContent}\n${target.classList}`);
        })
      });
    }
  </script>
  
</body>
</html>

 

komentarz 15 czerwca 2021 przez Comandeer Guru (599,730 p.)

Dobra, to wyobraźmy sobie, że zmieniamy element, wewnątrz którego jest input i jest jakaś akcja odpalana na jego zdarzenie change.

A jak dodasz obsługę do tego, to spokojnie, jest jeszcze z dobrze ponad setka innych zdarzeń – możemy tak cały dzień.

komentarz 15 czerwca 2021 przez VBService Ekspert (251,210 p.)
edycja 16 czerwca 2021 przez VBService

możemy tak cały dzień.

masz rację, ale tu jest mowa o prostym tekście w znaczniku p, który nie zawiera kilkunastu "węzłów" z imput-ami, button-ami, jak piszesz kod to i tak gdzieś musisz "okodować" te zdarzenia, można w pierwszej kolejności "pokolorować" klamry (raz, zaraz po wczytaniu html-a) a później resztę dopisać (obsługę zdarzeń), jak napisałem na początku

Można też ...

bo w sumie to się sprowadza do tego, jeżeli tekst z "klamrami" ma zawierać jeszcze wiele innych elementów html z oprogramowanymi zdarzeniami, że najlepiej w takim przypadku jest po prostu użyć css-a i dać sobie spokój z js-em.  smiley

Morze [<span claas="name-color">Bałtyckie, Martwe, Barentsa</span>] ma największe zasolenie?

 

a js-a wykorzystać co najwyżej do ...  wink

<!DOCTYPE html>
<html>  
  <head>

    <style>
      :root {
        --color-text: red;  /* default */
      }
      .color-text {
        color: var(--color-text);
        transition: color 0.5s;
      }


      /* dla demonstarcji */
      * {
        box-sizing: border-box;
      }
      div, p {
        width: 60vw;
        margin: 1em auto;
        padding: 1em;
        background-color: silver;
      }
      input {
        display: block;
      }
      input[type="submit"] {
        margin: 1em 0;
      }
    </style>
  </head>
  <body>

    <div>
      <form id="user_form">
        <label for="f_name">First name:</label>
        <input type="text" id="f_name" name="f_name">
        <label for="l_name">Last name:</label>
        <input type="text" id="l_name" name="l_name">
        <input type="submit">
      </form>
    </div>

    <p>Lorem [<span class="color-text">ipsum dolor sit amet</span>], consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [<span class="color-text">Ut enim ad minim veniam</span>], quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse [<span class="color-text">cillum dolore eu fugiat nulla</span>] pariatur. Excepteur sint <strong>[<span class="color-text">dicta</span>] numquam?</strong> occaecat cupidatat non proident, sunt in culpa qui officia deserunt <button>[<span class="color-text">Vel</span>]</button> mollit anim id est laborum.</p>
    <p>Quis [autem vel eum iure] reprehenderit qui in ea voluptate velit esse quam nihil <button>Lorem</button> molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem [<span class="color-text">accusantium doloremque laudantium</span>], totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi [<span class="color-text">architecto beatae</span>] vitae dicta sunt explicabo.</p>

    <div>Quis [autem vel eum iure] reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>

    <div>
      <button class="square-brackets-color">Red</button>
      <button class="square-brackets-color">Orange</button>
      <button class="square-brackets-color">Green</button>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const root = document.documentElement;
        const text_colors = ['red', 'orange', 'green'];
        
        [...document.querySelectorAll('.square-brackets-color')].forEach((button, index) => {
          button.addEventListener('click', () => {
            root.style.setProperty('--color-text', text_colors[index]);
          })
        });
        
         [...document.querySelectorAll('button:not(.square-brackets-color)')].forEach(button => {
           button.addEventListener('click', ({target}) => {
            alert(target.innerText);
          })          
         });
      });
    </script>

  </body>
</html>

 

Podobne pytania

0 głosów
1 odpowiedź 125 wizyt
pytanie zadane 8 października 2020 w HTML i CSS przez napoludniestad.pl Użytkownik (960 p.)
0 głosów
1 odpowiedź 509 wizyt
pytanie zadane 8 kwietnia 2017 w HTML i CSS przez Skorpion Początkujący (360 p.)
0 głosów
2 odpowiedzi 556 wizyt
pytanie zadane 26 stycznia 2017 w HTML i CSS przez Meggie Nowicjusz (120 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...