• 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

Fiszki IT
Fiszki IT
+1 głos
104 wizyt
pytanie zadane 14 czerwca w HTML i CSS przez japac Nowicjusz (130 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 przez pablop76 VIP (117,220 p.)

Użyj span

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

 

komentarz 14 czerwca przez japac Nowicjusz (130 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 przez pablop76 VIP (117,220 p.)
edycja 14 czerwca 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 przez VBService VIP (121,820 p.)
edycja 14 czerwca 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 przez Comandeer Guru (558,640 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 przez VBService VIP (121,820 p.)
edycja 15 czerwca 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 przez Comandeer Guru (558,640 p.)
edycja 15 czerwca 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 przez VBService VIP (121,820 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 przez Comandeer Guru (558,640 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 przez VBService VIP (121,820 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 przez Comandeer Guru (558,640 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 przez VBService VIP (121,820 p.)
edycja 16 czerwca 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ź 57 wizyt
pytanie zadane 8 października 2020 w HTML i CSS przez napoludniestad.pl Użytkownik (960 p.)
0 głosów
1 odpowiedź 258 wizyt
pytanie zadane 8 kwietnia 2017 w HTML i CSS przez Skorpion Początkujący (360 p.)
0 głosów
2 odpowiedzi 255 wizyt
pytanie zadane 26 stycznia 2017 w HTML i CSS przez Meggie Nowicjusz (120 p.)
Porady nie od parady
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

84,758 zapytań

133,561 odpowiedzi

295,987 komentarzy

56,012 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...