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

问题描述 投票:0回答:1
javascript regex
1个回答
0
投票

您输入的 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'));

© www.soinside.com 2019 - 2024. All rights reserved.