Funcja replace nie zmienia wewnętrznego html wewnątrz tagu textarea

pytanie zadane 13 czerwca 2023 w JavaScript przez Piotrek2713 Mądrala (5,400 p.)

Mam tag textarea z kodem html

<textarea class="code__textarea default-border">
  <!DOCTYPE html>
  <html lang="pl">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      
    </body>
  </html>
          </textarea>

uchwycony w js

let code = document.querySelector(".code__textarea");

oraz element, w którym można automatycznie nadać klasę do wybranego tagu

<div class="code-controls__css default-border col-md-5">
              <h1 class="code-controls__el h3 overflow-y-hidden"></h1>
              <button role="button" class="code-controls__add-class-button h6 overflow-y-hidden p-2 default-border d-none"></button><br>
              <input type="text" name="" class="code-controls__add-class-input d-none default-border p-2">
            </div>

zadaniem kodu jest roboczo podmiana fragmentu kodu <body> na <body class="przykladowa klasa">

function showInput()
{
  addClassInput.classList.remove('d-none');
  addClass();
}

function addClass()
{
  let className = addClassInput.value;
  let tagContent = "<" + codeControlsEl.textContent + ">";
  let newTagContent = "<" + codeControlsEl.textContent + ' class="'+className+'">';
  code.innerHTML.replace(tagContent, newTagContent);
  console.log(addClassButton, className, tagContent, newTagContent);
}

addClassButton.onclick = showInput;

ale nic się nie dzieje w kodzie

3 odpowiedzi

odpowiedź 13 czerwca 2023 przez Comandeer Guru (601,590 p.)
wybrane 17 czerwca 2023 przez Piotrek2713

Najlepsza

Skoro tam jest kod HTML, to bym się nie bawił w wyrażenia regularne, tylko wykorzystał parser wbudowany w przeglądarkę. Jest to IMO zdecydowanie mniej błędogenne i pozwala operować na tym kodzie przy pomocy zwykłych operacji DOM-owych:

const html = `<!DOCTYPE html><body>
	<h1>Sample HTML code</h1>
</body>`;

const parser = new DOMParser();
const dom = parser.parseFromString( html, 'text/html' );

dom.body.classList.add( 'my-class' );

const serializer = new XMLSerializer();

console.log( serializer.serializeToString( dom ) );

Natomiast co do Twojego kodu: replace() zwraca nowy string, nie podmienia istniejący. Żeby podmienić element.innerHTML trzeba przypisać do niego wynik replace():

code.innerHTML = code.innerHTML.replace(tagContent, newTagContent);

Aczkolwiek użyłbym tutaj value. W przypadku textarea nadpisywanie innerHTML działa bardziej jako podmiana domyślnej wartości. Przykład – zauważ, że zmiana innerHTML działa tylko zanim user cokolwiek zmieni w polu albo zanim zostanie ustawione value. W innym wypadku jest ignorowane.

odpowiedź 13 czerwca 2023 przez infinityhost Użytkownik (780 p.)
edycja 13 czerwca 2023 przez infinityhost

A value próbowałeś? Tak jak w input.

"Mam tag textarea z kodem html" a przypadkiem nie "mam element HTML z tekstem" (który chcę zamienić na HTML).

Użyj div'a, z contenteditable (taki atrybut).

"zadaniem kodu jest roboczo podmiana fragmentu kodu <body> na <body class="przykladowa klasa">" - ok,

Zrób tak, funkcja "ustaw_klase()" niech pobiera element który ma byc ustawiony (np. document.body). - to jest takie dosyć oczywiste działanie, na początku funkcji możesz sprawdzić czy element który pobrałeś to faktycznie to na czym chcesz pracować.

1) function ustaw_klase(element){...}

2) dodawaj do elementu w którym ustawiasz klasę właściwość np. ustawiona=1; (wyczyścisz potem w razie potrzeby wszystko co dodałeś przelatując po dokumencie document.documentElement.querySelectorAll)
Czemu nie używasz setAttribute()?

Żeby zrobić tak jak chcesz potrzebujesz zmienić document.body.outerHTML (w funkcji element.outerHTML).

Jak chcesz zmienić to tak jak chcesz zmienić to a) robiesz pętle wyszukujesz wszystkie atrybuty i kleisz to razem z nową zawartościa (nowa_zwaartoscy = "<" +body + (lancuch sklejony z atrybutów i wartosci) + ">"+innerHTML +"</body>"

b) odczytujesz outer HTML i lecisz pętlą od początku do pierwszego znaku ">" tam przerywasz , dopisujesz co chcesz , zamykasz " >" i doklejasz inner HTML.

komentarz 13 czerwca 2023 przez Piotrek2713 Mądrala (5,400 p.)

Czemu mam użyć value dla textarea? Sprawdziłem to dla pewności i nie działa. Zmieniłem na diva z atrybutem contenteditable z właściwością True i też nie działa

<div contenteditable="true" class="code__textarea default-border">
  &lt;!DOCTYPE html&gt;<br>
  &lt;html lang="pl"&gt;<br>
  &lt;head&gt;<br>
  &lt;meta charset="UTF-8"&gt;<br>
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;<br>
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;<br>
  &lt;title&gt;Document&lt;/title&gt;<br>
  &lt;/head&gt;<br>
  &lt;body&gt;<br>
      
  &lt;/body&gt;<br>
  &lt;/html&gt;<br>
  </div>

komentarz 13 czerwca 2023 przez infinityhost Użytkownik (780 p.)
edycja 13 czerwca 2023 przez infinityhost

Nie działa? Czasem trzeba zainicjalizować ten "value" w skrypcie textarea.value = ""; i potem powinno działać.

Nie wydaje mi się, żeby textarea pozwoliła Ci dodać HTML.

contenteditable - chyba nie potrzebuje wartości, żeby zadziałać,.

Tzn rozumiem, że chcesz edytować to co próbujesz dodać do textarea.

Wejdz na sRWD project (ct8.pl) rozdział "SetContainer" ostatni przykład kliknij "test" tam jak klikniesz czerwony przycisk , to div z imieniem staje się edytowalny.

Na tym moim kompilatorze infinityhost.ct8.pl/test_passed/kompilator.html - wklejam i ma dokładnie taki obrazek

odpowiedź 13 czerwca 2023 przez VBService Ekspert (253,420 p.)

Twój kod

function addClass()
{
  let className = addClassInput.value;
  let tagContent = "<" + codeControlsEl.textContent + ">";
  let newTagContent = "<" + codeControlsEl.textContent + ' class="'+className+'">';
  code.innerHTML.replace(tagContent, newTagContent);
  console.log(addClassButton, className, tagContent, newTagContent);
}

wstawia nazwę klasy tylko jeden raz

[ on-line ]

function addClass() 
{
  const tagContent = '<' + addClassButton.textContent + '>',
        newTagContent = '<' + addClassButton.textContent + ' class="' + addClassInput.value + '">'

  code.value = code.value.replace(tagContent, newTagContent);
}

spróbuj np. tak

[ on-line ]

function addClass()
{
  const tag = addClassButton.textContent,
        tagNew = ` class="${addClassInput.value}">`;

  code.value = code.value.replace(new RegExp(`${tag}[^>]*>`), tag + tagNew);
}

co nie zmienia faktu, że dodawanie kilku klas do elementu nie wchodzi w rachubę w tej postaci kodu (dochodzi zabawa z np. RegExp na atrybucie class).

Tak jak napisał @Comandeer, jeżeli chcesz mieć możliwość dostępu do jakiegokolwiek elementu html z kodu w textarea w łatwy sposób i operować w tym przypadku na atrybucie class (dodawanie jednej lub kilku nazw klas), rozważ użycie DOMParser-a.