console log dangerouslySetInnerHTML={{ __html: article.description }} - reactjs

Question

I built a wyziwig following the instructions here: https://blog.learningdollars.com/2020/04/01/how-to-add-a-rich-text-editor-in-your-react-app-using-draft-js-and-react-draft-wysiwyg/
Now I want to add a show/hide container based on 3 lines of text in the output.
I'm just trying to console.log(dangerouslySetInnerHTML={{ __html: output }}), so I can test the show/hide as well as add an ellipsis. Anyone have any idea how to do this?
Edit:
If you don't want to follow the link, I have setup a sandbox here: https://codesandbox.io/s/react-draft-wysiwyg-fjfh9
More Details:
<div class="modal-body" dangerouslySetInnerHTML={{ __html: output }} /> comes from a library draftjs-to-html. It takes a string such as the following <p>This text is <strong><em>BOLD AND ITALIC</em></strong> with this wyziwyg.</p>, and outputs a string display to the html page such as the following...
"This text is BOLD AND ITALIC from a wyziwyg."
What I want to be able to is determine the .length() of the html displayed output string(above). To do this, I need to see if there is a way to console.log(dangerouslySetInnerHTML={{ __html: output }});

Answer 1

When you want to get the length to the text from a html string, you could do the following, since you assume the contents to be safe (coming from the user's editor):
const getTextLength = (html) => {
// This will never get added to the DOM.
const element = document.createElement("div")
element.innerHTML = html
return element.textContent.length
}
// Some test cases.
const outputs = [
"Some text",
"<p>Some text</p>",
"<p><strong>Some</strong> text</p>"
]
// Should ouput `9` for all test inputs.
console.log(outputs.map(getTextLength))