HTML和Javascript：从字符串中删除包含动态内容的完整标签

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.

Answer 1

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> 

Answer 2

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());

Answer 3

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); 

Answer 4

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"

Answer 5

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>', '');