удалить имя тега, но сохранить тег - PullRequest
Новая
       7

удалить имя тега, но сохранить тег

0 голосов
/ 20 апреля 2020

Здравствуйте, у меня есть тег <strong></strong>, вложенный в абзац <p></p>, я пытаюсь удалить тег <strong>, но сохраняю текст или значение. Нечто похожее на распаковку в jquery, но в javascript.

Я пробовал этот код на фиктивной странице HTML, и он отлично работает 

<html>
<body>
    <p>aaa <Strong>bbbbb</Strong></p>
    <p>acccaa <Strong>ddddd</Strong></p>
    <p>eeee <Strong>ffff</Strong></p>

    <script>
        var p = document.getElementsByTagName("p");
        for(var i=0;i<p.length;i++){
            var strongs = p[i].getElementsByTagName("strong");
            for(var j=0;j<strongs.length;j++){
                p[i].replaceChild(document.createTextNode(strongs[j].innerText),strongs[j]);
            }
        }
    </script>
</body>
</html>

Но как только я попробую тот же код на примере реальной страницы: https://www.bustle.com/privacy

Я получаю эту ошибку:

Не удалось выполнить replaceChild на узле: Заменяемый узел не является дочерним для этого узла.

Любая идея о том, как это получить работа над примером или любым другим примером?

Ответы [ 2 ]

0 голосов
/ 20 апреля 2020

Не нужно l oop через абзацы удалять <strong>. Простое удаление всех «сильных» на месте работает нормально. 

function removeStrongs() {
  let strongs = document.querySelectorAll('strong');
  strongs.forEach(strong => {
    strong.insertAdjacentText('afterend', strong.innerText);
    strong.remove();
  });
}
<h4>This is a <strong>Title</strong></h4>
<p>
  Now is the time for all <strong>good</strong> men to come to the <strong>aid</strong> of the party.
</p>
<p>A <strong>quick brown</strong> fox jumps over the lazy dog.</p>

<button onclick="removeStrongs();">Remove Strongs</button>
0 голосов
/ 20 апреля 2020

getElementsByTagName() возвращает live NodeList. Поэтому, когда вы заменяете тег, индексы всех следующих элементов смещаются вниз, и код завершается сбоем, когда у вас есть более одного тега <strong> в одном и том же абзаце. В результате некоторые теги будут пропущены.

Решение состоит в том, чтобы преобразовать NodeList в массив, чтобы он не изменялся во время зацикливания.

Другая проблема в вашем реальная страница, которой нет во фрагменте, - это то, что теги <strong> могут быть глубоко вложены в <p>. Вы должны использовать strongs[j].parentElement, чтобы получить его прямого родителя, а не предполагать, что p[i] является родителем. 

var p = document.getElementsByTagName("p");
for (var i = 0; i < p.length; i++) {
  var strongs = Array.from(p[i].getElementsByTagName("strong"));
  for (var j = 0; j < strongs.length; j++) {
    strongs[j].parentElement.replaceChild(document.createTextNode(strongs[j].innerText), strongs[j]);
  }
}
<html>

<body>
  <p>aaa
    <Strong>bbbbb</Strong> - <strong>12345</strong></p>
  <p>acccaa <span><Strong>ddddd</Strong> x</span></p>
  <p>eeee
    <Strong>ffff</Strong>
  </p>

</body>

</html>

Вы также можете избежать вложенных циклов, используя селектор запросов. 

var strongs = document.querySelectorAll("p strong");
strongs.forEach(strong => strong.parentElement.replaceChild(document.createTextNode(strong.innerText), strong));
<html>

<body>
  <p>aaa
    <Strong>bbbbb</Strong> - <strong>12345</strong></p>
  <p>acccaa <span><Strong>ddddd</Strong> x</span></p>
  <p>eeee
    <Strong>ffff</Strong>
  </p>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...