如何将 html 开始标签与可能在引号内包含内联标签的复杂属性相匹配

Answer 1

您输入的 HTML 属性不太符合要求 值应包含

<

和

>

，而不是

<

和

>

。 这个可以纠正吗？

如果没有，那么你的正则表达式将会变得非常复杂，因为你会 必须处理属性的所有符号：

• 没有值：

  <input type="text" required .../>

  。
• 可选空格：

  data-id = 340

  。
• 单引号或双引号值：

  <span class="thing" id='thing-98'>...</span>

我曾经尝试编写一个正则表达式来突破 我写的“尝试”并解析 HTML 的正则表达式 使用 PHP 中提供的 PCRE 风格，它提供 extending 符号标志并提供更多功能 以及使用子模式（如函数）的可读性。 您可以在这里使用它：https://regex101.com/r/ratpUd/4

但是在纯 JavaScript 中，这将是一场噩梦 有效的东西。为此使用正确的工具是方法 需要：XML/HTML 解析器

const xmlString = `<Display propKey=value onClick="()=>{ count++ }" />
<div innerHTML="<inpit>" ></div>`;

const parser = new DOMParser();
// Use "text/html" as it will let you do a few
// errors in the XML syntax (which is your case).
const doc = parser.parseFromString(xmlString, "text/html");

const display = doc.querySelector('display');
const divInnerHtml = doc.querySelector('div[innerHTML]');

// Read what you want.
console.log(display.getAttribute('onclick'));
console.log(divInnerHtml.getAttribute('innerhtml'));