用html内容替换div中的特定内容

Question

我想用内部包装的html元素替换div中的部分内容。

实际内容：

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)

预期输出：

    <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>

generated)

• Create

• 删除行没有任何信息(行号将是每个错误消息

的动态

• 列表项)。

Answer 1

这并不是很复杂。Regex可以帮助您。我使用regex查找每一行中的第一行，并使用.split()拆分行。

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)

​