Отключить вложенные теги в html с помощью javascript

Возьмите, например, этот html:

<tag>sometext<tag>sometext</tag>sometext</tag>

Мне нужна функция javascript, которая может заменить это на:

<tag>sometext</tag><tag>sometext</tag><tag>sometext</tag>

Как мне это сделать ?

Я пытался сделать это с помощью регулярных выражений, но это не заменяет каждый вложенный тег, и я не знаю, есть ли выражение, которое может достичь этого.

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <script>
        function Unnest() {
                document.getElementById("Nested").innerHTML = document.getElementById("Nested").innerHTML.replace(/<tag>(.*?)<tag>(.*?)</tag>(.*?)</tag>/g, '<tag>$1</tag><tag>$2</tag><tag>$3</tag>');
            }
    </script>
  </head>
  <body>
    <div id = "Nested">
      <tag>sometext<tag>sometext</tag>sometext</tag>
    </div>
    <button onclick = "Unnest()">Unnest</button>
  </body>
</html>

Это отвечает на ваш вопрос? stackoverflow.com/questions/41915184/…

— 18.02.2023 21:57

@Peterrabbit Нет, здесь нет неработающих тегов. Исходная строка HTML действительна (исключая использование несуществующего тега).

— 18.02.2023 22:06

Тогда, возможно, это может быть ответом на вашу проблему stackoverflow.com/questions/49967843/…

— 18.02.2023 22:17

stackoverflow.com/questions/41915184/… вывод с использованием кода в этой ссылке: <tag>sometext<tag>sometext</tag>sometext</tag> (ничего не меняется), код из другой ссылки stackoverflow.com/questions/49967843/… выводит: <tag>sometextsometext</tag><tag>sometext</tag> (это не то, что я хотел)

— 18.02.2023 22:32

javascript html regex

18.02.2023 21:53

Руководство для начинающих по веб-разработке на React.js

Веб-разработка - это захватывающая и постоянно меняющаяся область, которая постоянно развивается благодаря новым технологиям и тенденциям. Одним из...

Калькулятор CGPA 12 для семестра

Чтобы запустить этот код и рассчитать CGPA, необходимо сохранить код как HTML-файл, а затем открыть его в веб-браузере. Для этого выполните следующие...

Как собрать/развернуть часть вашего приложения Angular

Вам когда-нибудь требовалось собрать/развернуть только часть вашего приложения Angular или, возможно, скрыть некоторые маршруты в определенных средах?

Оптимизация React Context шаг за шагом в 4 примерах

При использовании компонентов React в сочетании с Context вы можете оптимизировать рендеринг, обернув ваш компонент React в React.memo сразу после...

Интервьюер: Почему '[] instanceof Object' возвращает "true"?

Все мы знаем, что [] instanceof Array возвращает true, но почему [] instanceof Object тоже возвращает true?

Абстрактное синтаксическое дерево (AST) и как оно работает с ReactJS

Абстрактное синтаксическое дерево (AST) - это древовидная структура данных, которая представляет структуру и иерархию исходного кода на языке...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это всего лишь пример возможного пути в зависимости от сложности ваших реальных тегов HTML, и, как таковой, проблема может быть чрезмерным упрощением. Например, если в вашей модели DOM много таких деревьев тегов с разным количеством дочерних узлов, вам нужно будет выбрать самый внешний тег каждого выбора; и если они вложены друг в друга, вам придется найти способ выбрать их или выполнить итерацию по их дочерним узлам, возможно, рекурсивно. Трудно сказать без дополнительной информации.

Тем не менее, если вы достаточно хорошо знаете структуру DOM, на которую вы ориентируетесь, вы можете попробовать такой подход и адаптировать его под себя.

Однако, если вы пытаетесь справиться с более общим сценарием или должны работать с HTML как со строкой, а не с использованием DOM, то, вероятно, потребуется другой подход, который анализирует строку.

let el = document.querySelector('tag').firstChild,
    html = new Array();
    
while (el) {
  switch (el.nodeName) {
     case "TAG" :
       html.push("<tag>" + el.textContent + "</tag>");
       break;
     case "#text" :
       html.push("<tag>" + el.nodeValue + "</tag>");
       break;
     default :
       console.info("Unexpected input");
  }
  el = el.nextSibling;
}

console.info( html.join(''));

<tag>sometext1<tag>sometext2</tag>sometext3</tag>

    let tag = document.querySelector('tag'),
        el = tag.firstChild,
        frag = document.createDocumentFragment();
        
    while (el) {
      switch (el.nodeName) {
         case "TAG" : {           
           let t = document.createElement('TAG');
           t.classList.add('indiv');
           t.textContent = el.textContent;
           frag.appendChild(t);
           break;
         } 
         case "#text" : {
           let t = document.createElement('TAG');
           t.classList.add('indiv');
           t.textContent = el.nodeValue;
           frag.appendChild(t);           
           break;
         }
         default :
           console.info("Unexpected input");
      }
      el = el.nextSibling;
    }

tag.parentNode.replaceChild(frag,tag);

tag.indiv {
  margin: 0 10px;
}

<tag>sometext1<tag>sometext2</tag>sometext3</tag>

@Massy Я должен был добавить, что строка была записана в консоль только для иллюстрации. Вы можете использовать метод DOM для полной замены узла после использования этого подхода для построения нового дерева, такого как document.createElement('TAG'), и установки его textContent в каждом case из switch. Вы можете добавить их к фрагменту документа, а затем заменить существующий узел вновь созданным фрагментом. Дело в том, что вам не обязательно использовать innerHTML. Или вы можете попробовать insertAdjacentHTML или insertAdjacentElement.

— 19.02.2023 19:17

@Massy В пример ответа добавлен дополнительный фрагмент кода, касающийся приведенного выше комментария.

— 19.02.2023 19:29

19.02.2023 05:25