W jaki sposób w wybranym divie zamienić przecinki na przejście do następnej linii? (<br/>)

Question

Witam serdecznie.

Tworzę internetowy serwis, który z interfejsu API otrzymuje odpowiedź składającą się z kilkunastu cyfr oddzielonych przecinkami. W jaki sposób pozamieniać wszystkie przecinki na <br/> wewnątrz diva z odpowiedzią? Przydała by się również funkcjonalność numerowania każdej linii tekstu (cyfr) w tym divie. Z pozdrowieniami

Answer 1

Możesz użyć metody “split”, by utworzyć tablicę liczb, a następnie w pętli generować elementy “LI” przy użyciu metody “createElement”. Zamiast “BR”, może lepiej jest utworzyć “LI” wewnątrz znacznika “OL”, a wtedy numerowanie będzie automatyczne.

Comments

a następnie w pętli generować elementy “LI”,
przy użyciu metody “createElement”

nie koniecznie w pętli i z użyciem createElement 

<div id="response-from-api-view"></div>

<script>
  const d = document.querySelector('#response-from-api-view');
  const response_from_api = '42, 157, 293, 74, 108, 382, 56, 4091, 25, 673, 841, 19, 302, 495, 78';
  d.innerHTML = `<ol><li>${response_from_api.split(',').join('</li><li>')}</li></ol>`;
</script>

 

---

O coś podobnego właśnie mi chodziło, dziękuję. Jednakże chciałbym zamieścić na stronie także przycisk do pobrania zawartości tego diva jako txt i w takiej sytuacji chciałbym by zniknęły kropki po liczbach porządkowych tej listy oraz by te liczby były zaznaczalne. Jest na to jakiś sposób? Pozdrawiam

Answer 2

 

przycisk do pobrania zawartości tego diva jako txt i w takiej sytuacji chciałbym by zniknęły kropki po liczbach porządkowych tej listy oraz by te liczby były zaznaczalne

to może być np.:  [ wersja kodu on-line ]

<style>
  .view {
    margin: .25rem;
    font: 400 .9rem/1 system-ui, monospace, sans-serif;
  }
  .view ol {
    list-style: none;
    padding: 0;
    width: 100%; /* wielkości div-a */
  }
  .view li {
    margin-bottom: 10px;
    margin: .15rem 0;
    padding: .15rem 0 .15rem .2rem;
    cursor: default;
    color: black;
    transition: background 200ms, color 100ms;    
  }
  .view li span {
    display: inline-block;
    font-weight: bold;
    font-size: 80%;
    width: 3ch;
    text-align: right;
    margin-right: .25rem;
  }
  .view li:nth-child(even) {
    background-color: rgba(0, 0, 0, .15);
  }
  .view li:hover {
    background-color: rgba(0, 0, 0, .35);
    color: white;
  }
  .view li label {
    display: inline-block;
    width: 100%;
    cursor: pointer;
  }
  .view li input {    
    max-width: 10px;
    max-height: 10px;    
  }
  .view button {
    width: 20ch;
    font-size: 85%;
    font-weight: bold;
    border-radius: .25rem;
    cursor: pointer;
    border-color: rgba(0, 0, 0, .35);
  }
</style>

<div id="response-from-api-view" class="view">
  <form>
    <ol></ol>
    <button type="button" id="download-as-txt">Pobież jako txt</button>
    <button type="button" id="select-all">Zaznacz wszystkie</button>      
  </form>
</div>

<script>
  window.addEventListener('load', on__load); 

  function on__load() {
    const form_ = document.querySelector('#response-from-api-view form');
    const response_view = form_.querySelector('ol');
    // Dla demonstracji - symulacja danych z api
    const response_from_api = '12, 257, 293, 74, 108, 382, 56, 4091, 25, 673, 841, 19, 302, 495, 78'.split(', ');

    const html_list = document.createDocumentFragment();
    for (const [index, value] of response_from_api.entries()) {
      const li = document.createElement('LI');
      li.innerHTML = `<label>
                        <span>${index+1}.</span>
                        <input type="checkbox" name="number" value="${index+1 + ' ' + value}">${value}
                      </label>`;
      html_list.appendChild(li);
    }
    response_view.appendChild(html_list);

    form_.addEventListener('click', function(e) {
      if (e.target.matches('#select-all')) {
        [...this.querySelectorAll('li input')].map(ch => ch.checked = true);
      }

      if (e.target.matches('#download-as-txt')) {
        const list_items = [...this.querySelectorAll('li input:checked')];
        const text_content = list_items.map(ch => ch.value).join('\n');

        if (text_content) {
          const blob = new Blob([text_content], {type: 'text/plain'});
          const url = URL.createObjectURL(blob);
          const a = document.createElement('A');

          a.href = url;
          // a.download = `twoja_nazwa_${new Date().toISOString().split('T')[0]}.txt`
          // np. twoja_nazwa_2024-08-01.txt
          a.download = 'twoja_nazwa.txt';
          a.click();

          URL.revokeObjectURL(url);
        }
      }
    });
  }
</script>