The best way to change styles for inner HTML

  • 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", "#"); = "none"; = "inherit"; = "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

  • 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

  • Yeah, inline script worked out. Thanks

Log in to reply

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.