The best way to change styles for inner HTML

alexey-boiko

From backend I receive payload that contains rich text fields. The problem is that I need to update properties for links included in these texts.
I was thinking to use DOMParser like so:

  const parsed = new DOMParser().parseFromString(this.innerHtml, "text/html");

  const links = parsed.getElementsByTagName("a");

  Array.from(links).forEach((link) => {
    link.setAttribute("href", "#");
    link.style.textDecoration = "none";
    link.style.color = "inherit";
    link.style.cursor = "text";
    link.onclick = (event) => event.preventDefault();
  });

However, when I try to run such code, I receive error message that DOMParser is not defined .

Then, I tried to use jsdom, but statement

const { JSDOM } = require('jsdom');

produces error "Unable to require module jsdom. resolveModulePath is not a function". I have 24.0.0 version of jsdom and 21.6.2 version of Node installed.

If you know, could you, please, help me to find solution for this problem. I understand that using regex is always an option, but usually pretty unreliable one when it comes to parsing HTML. So, I'd prefer to avoid it if there are better alternatives

admin

In case you use chrome-pdf recipe... Can't you do this with inline javascript instead of modifying the html? <script>...</script>. It would be performing better since you have the dom already loaded in chrome.

There is some error in the require of jsdom, we will look at it here.
Please use another lib like cheerio till then
https://playground.jsreport.net/w/anon/NE34uLwD

alexey-boiko

Yeah, inline script worked out. Thanks