Replace specific content from div with html content-CodePudding

I want to replace some portion of content from a div with inside wrapped html elements.

Actual content:

line 120, col 8: The relative URL 'Helloo' for attribute 'href' in tag 'a' is disallowed. (see undefined)line 136, col 16: The relative URL 'fasdf' for attribute 'href' in tag 'a' is disallowed. (see undefined)line 155, col 12: Missing URL for attribute 'action-xhr' in tag 'form'. (see https://amp.dev/documentation/components/amp-form)

Expected output:

    <ul>
      <li>The relative URL 'Helloo' for attribute 'href' in tag 'a' is disallowed. (see undefined)</li>
      <li>The relative URL 'fasdf' for attribute 'href' in tag 'a' is disallowed. (see undefined)</li>
      <li>Missing URL for attribute 'action-xhr' in tag 'form'. (see https://amp.dev/documentation/components/amp-form)</li>
    </ul>

Remove line no information (line numbers will be dynamically generated)
Create list item for each error message

CodePudding user response：

It is not very complicated. Regex can help you. I used regex to find first of every line and used .split() to split lines

str = str.split(/line \d , col \d : /g).filter(x => x != "").map(x => `<li>${x}</li>`).join('')
str = `<ul>${str}</ul>`

let str = `line 120, col 8: The relative URL 'Helloo' for attribute 'href' in tag 'a' is disallowed. (see undefined)line 136, col 16: The relative URL 'fasdf' for attribute 'href' in tag 'a' is disallowed. (see undefined)line 155, col 12: Missing URL for attribute 'action-xhr' in tag 'form'. (see https://amp.dev/documentation/components/amp-form)`;

str = str.split(/line \d , col \d : /g).filter(x => x != "").map(x => `<li>${x}</li>`).join('')
str = `<ul>${str}</ul>`

console.log(str)