Javascript remove one html tag with a specific structure

Question

I can remove all html tags from the text but I cannot remove just the structure in span tags with data-word inside ...

function strip(html)
{
   var tmp = document.createElement("DIV");
   tmp.innerHTML = html;
   return tmp.textContent || tmp.innerText || "";
}

Original is:

I <span data-word="word1" class="synonyms" title="word2">word3</span> <b>word4<b>.

The result should be:

I word3 <b>word4</b>.

With the script from above the result I get is:I word3 word4. So the remaining html is not preserved.

It is code from Strip HTML from Text JavaScript.

So you want to only remove span tags that have a data-word attribute (and replace them by their content)? — Sebastian Simon
– Sebastian Simon, Commented Apr 23, 2016 at 15:32

Sebastian Simon · Accepted Answer · 2016-04-23 19:38:26Z

1

Select the elements you want to remove, replace them by their inner HTML and take the inner HTML.

function stripDataWordTags(container) {
  var node = container.cloneNode(true);
  Array.prototype.slice.call(node.getElementsByClassName("synonyms"))
    .forEach(function(a, i) {
      a.parentElement.insertBefore(document.createTextNode(a.innerHTML), a);
      a.parentElement.removeChild(a);
    });
  return node.innerHTML;
}

// Demo and usage:
alert(stripDataWordTags(document.getElementById("test")));

<div id="test">
  I <span data-word="test" class="synonyms">love</span> <b>ECMAScript 5</b>.
</div>

edited Apr 23, 2016 at 19:38

answered Apr 23, 2016 at 15:43

Sebastian Simon

19.8k8 gold badges61 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Brana Over a year ago

Hello, the word1 is not the same and the class is (class="synonyms"). So this doesn't work in majority of cases.

Sebastian Simon Over a year ago

@Brana Not sure what you mean… it doesn’t depend on the content of the attribute. If you want to select it by class synonyms, then say so in your question. You can easily change the selector to whatever you want, although for classes you can use getElementsByTagName instead of querySelectorAll, as the browser support for the prior is better.

Brana Over a year ago

The oputput with this code is the same as input - I <span data-word="test" class="synonyms">love</span> <b>ECMAScript 5</b> ... please check it.

Sebastian Simon Over a year ago

@Brana Oh, getElementsByTagName should be getElementsByClassName. It works now, anyway.

Sebastian Simon Over a year ago

@Brana Alright, now it really works! I thought, it would already work with multiple elements, but I know why it failed: I used getElementsByClassName, which returns an HTMLCollection, which is a live element collection. The first forEach call removes the first occurrence, the second call can’t be executed, because there is no second element anymore. slice-ing the HTMLCollection first, works. querySelectorAll however returns a NodeList which doesn’t have that problem, so it even works without the slice.

|

Collectives™ on Stack Overflow

Javascript remove one html tag with a specific structure

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related