HTML and Javascript: Remove a complete tag with dynamic content inside from string

Question

I have a string that conains HTML. In this HTML I have a textbox with text inside:

<div class="aLotOfHTMLStuff"></div>
<textbox>This textbox must be terminated! Forever!</textbox>
<div class="andEvenMoreHTMLStuff"></div>

Now I want to remove the textbox from that string, including the text inside. The desired result:

<div class="aLotOfHTMLStuff"></div>
<div class="andEvenMoreHTMLStuff"></div>

How can I achieve it? The two main problems: It is a string and not part of the DOM and the content inside the textbox is dynamic.

score 1 · Answer 1 · answered Oct 05 '16 at 07:45

Here is an example that will look for the opening and closing tags in the string and replace anything in between.

const template = document.querySelector('#html')
const str = template.innerHTML

function removeTagFromString(name, str) {
  const reg = new RegExp('<' + name + '.*>.*<\/'+ name +'.*>\\n*', 'gm')
  return str.replace(reg, '')
}
console.log('before', str)
console.log('after', removeTagFromString('textbox', str))

<template id="html">
<div class="aLotOfHTMLStuff"></div>
<textbox>This textbox must be terminated! Forever!</textbox>
<div class="andEvenMoreHTMLStuff"></div>
</template>

I'd like to know why my previous comment was removed... If you're afraid of TO͇̹̺ͅƝ̴ȳ̳ TH̘Ë͖́̉ ͠P̯͍̭O̚N̐Y̡ in ascii it gives : ["*do not use RegEx to parse XML markup*"](http://stackoverflow.com/a/1732454/3702797) — Kaiido, Oct 05 '16 at 08:01

Indra · Answer 2 · 2016-10-05T08:05:38.583

1

If it is text string not HTML, you can convert it to DOM:

var str = '<div class="aLotOfHTMLStuff"></div><textbox>This textbox must be terminated! Forever!</textbox><div class="andEvenMoreHTMLStuff"></div>';
var $dom = $('<div>' + str + '</div>');

Then remove element from DOM:

 $dom.find('textbox').remove();

If you need, can get string back:

console.log($dom.html());

edited Oct 05 '16 at 08:05

answered Oct 05 '16 at 08:00

Indra

111
5

score 0 · Answer 3 · answered Oct 05 '16 at 07:52

Try this:

var string = '<div class="aLotOfHTMLStuff"></div><textbox>This textbox must be terminated! Forever!</textbox><div class="andEvenMoreHTMLStuff"></div>';
if ( string.includes("<textbox>") ) {
 var start = string.indexOf("<textbox>");
  var stop = string.indexOf("</textbox>");
  string = string.replace(string.slice(start, stop+10), "");
}
console.log(string);

score 0 · Answer 4 · edited Oct 05 '16 at 08:37

You can use parseHTML to convert string to html, like..

var str = '<div class="aLotOfHTMLStuff"></div><textbox>This textbox must be terminated! Forever!</textbox><div class="andEvenMoreHTMLStuff"></div>';
var a = $.parseHTML(str);
var newstr = ""; 
a.forEach(function(obj) {
    if ($(obj).prop('tagName').toLowerCase() != "textbox") {
        newstr += $(obj).prop("outerHTML")
    }
});

It's very simple and you can remove any tag in future by just replacing "textbox"

score -1 · Answer 5 · answered Oct 05 '16 at 07:46

-1

It is a string and not part of the DOM and the content inside the textbox is dynamic.

So that html is in a js variable of type string? like this?:

var string = '<div class="aLotOfHTMLStuff"></div><textbox>This textbox must be terminated! Forever!</textbox><div class="andEvenMoreHTMLStuff"></div>';

So in that case you could use .replace(); like this:

string = string.replace('<textbox>This textbox must be terminated! Forever!</textbox>', '');

answered Oct 05 '16 at 07:46

Sergio Alen

716
5
8

Thanks, but unfortunetaly the text inside the textbox is dynamic. But I could write something to figure out the dynamic text, that could work with your solution. – Skalibran Oct 05 '16 at 07:48
Then pass the dynamic content with it something like this: `string = string.replace(''+ dynamicContent +'', '');` – Sergio Alen Oct 05 '16 at 07:52

HTML and Javascript: Remove a complete tag with dynamic content inside from string

5 Answers5