How to Encode only content inside of html tags in Javascript

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 3 years ago.

Improve this question

How do I encode in JS only what's inside tags but I don't know the order in which the tags will appear. I do know that I will only have em, strong, br and a tags tho. Look at the funny o and & below. Thanks.

<div>hello my <em>friend</em>, this is how you <em><strong>search</strong></em> <strong><a ****="http://google.com">göogle</a></strong> & remember, don't lose your <strong><em>googliness</em></strong>...</div>

So it should encode only the special characters inside the tags but not the tags themselves.

Desired Output:

<div>hello my <em>friend</em>, this is how you <em><strong>search</strong></em> <strong><a ****="http://google.com">g&#xF6;ogle</a></strong> &#x26; remember, don't lose your <strong><em>googliness</em></strong>...</div>

JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

This should help you get up & running. Simply iterate over the childNodes and modify their textContent property:

[...div.childNodes].forEach(

  (el) => {

    // here you can do whatever you want with your nodes

    el.textContent = el.textContent.toUpperCase();

    // so this is the place to implement your encoding logic

  }

)

<div id="div">

  hello my <em>friend</em>, this is how you <em><strong>search</strong></em> <strong><a ****="http://google.com">göogle</a></strong> & remember, don't lose your <strong><em>googliness</em></strong>...

</div>

Run code snippetExpand snippet