CODEWITHSUNDEEP
javascripthtmlformatting
Ben
Ben

Reputation: 23

Javascript - Getting formatted textContent of an element?

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

Upvotes: 0

Views: 676

Answers (1)

NickSlash
NickSlash

Reputation: 5077

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>')
}

Upvotes: 1

Related Questions