I’m trying to parse html tags and want to remove <select> from code which is given in TextArea1 and want to show output in TextArea2 on button click.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<textarea id="TextArea1" rows="10" cols="100"></textarea><br />
<textarea id="TextArea2" rows="10" cols="100"></textarea><br />
<input id="Submit1" onclick="parsehtml()" type="submit" value="submit" />
<script>
function parsehtml()
{
document.getElementById("TextArea2").value = document.getElementById("TextArea1").value.replace(/</?[^>]+>/ig, " ");
}
</script>
</body>
</html>
In my TextArea1 i have code like
<span>Span 1</span> <select> <option>opt 01</option> <option>opt 02</option> </select> <span>Span 2</span> <select> <option>opt 11</option> <option>opt 12</option> </select>
This code return output like:
Span 1 opt 01 opt 02 Span 2 opt 11 opt 12
Please help me to remove all <select>...</select> with all of it’s <option> with innerText and want to output like this:
Span 1 Span 2
Thanks in advance.
Advertisement
Answer
Here updated version with different approach. We create new html element from the input value and and get span elements textContent.
function parsehtml()
{
let value = document.getElementById("TextArea1").value
let html = document.createElement('html');
html.innerHTML = value
let spans = Array.from(html.getElementsByTagName( 'span' ))
let result = spans.map(span => span.textContent)
document.getElementById("TextArea2").value = result.join(' ')
}