Javascript - Getting formatted textContent of an element?

Question

Say I have the following div:

<div id="some-div">
   <div id="sub-div">Lorem <b>ipsum</b> dolor <a href="https://www.example.com/">sit</a> amet, consectetur adipisici elit</div>
</div>

Now, when I get the textContent of this div, I get Lorem ipsum dolor sit amet, consectetur adipisici elit . What I want is Lorem <b>ipsum</b> dolor sit amet, consectetur adipisici elit (It could also be other identifiers than <b> indicating that the "ipsum" is bold).

I do not want things like the <a> -Link (since that would just be innerHTML of the sub-div ).

Answer 1

Something along these lines might work?

convert your desired tags into non-html markup (like bb code)

read the innerText to remove all the other html markup

convert the bb code back into html

update

press the "CLICK" text, and the result will be printed to console

 function replaceTag(node, tag) { let tags = node.querySelectorAll(tag) tags.forEach( (item) => { item.outerHTML = `[${tag}]${item.innerHTML}[/${tag}]` }) } function ex() { // create a clone to mutate let node = document.getElementById("targetNode").cloneNode(true) // list of desired tags let tags = ["b", "i", "u", "s"] // replace tags with bb code style markup tags.forEach ( (tag) => { replaceTag(node,tag) }) // print the innerText to console (replacing bb code with html) console.log(node.innerText.replace(/\[([bius])\](.+?)\[\/\1\]/g,'<$1>$2</$1>')) }

 <div id="targetNode"><span>Span</span><b>BOLD</b><i>italic</i><s>strike</s></div> <div onclick="ex()">CLICK</div>

update

Not thoroughly tested, given a node and a list of desired tags, it should return something like innerText with the desired tags left in place (although it will not preserve any attributes associated with them)

function getFilteredHTML(targetNode, tags = ["b", "i", "u", "s"]) {
    let node = targetNode.cloneNode(true)
    let expr = new RegExp("\\[("+tags.join("|")+")\\](.+?)\\[\\/\\1\\]","g")
    tags.forEach( (tag) => {
        let searchTag = node.querySelectorAll(tag)
        searchTag.forEach( (item) => { item.outerHTML = `[${tag}]${item.innerHTML}[/${tag}]` } )
    })
    return node.innerText.replace(expr,'<$1>$2</$1>')
}