使用Masterminds/html5-php处理HTML时Vue.js属性遭移除的问题

这个问题很常见——Masterminds/html5-php默认严格遵循HTML5标准解析规则，Vue.js的@submit.prevent这类以@开头的自定义指令不属于标准HTML属性，所以会被解析器当作无效属性过滤掉。下面是具体的解决方法：

方法1：开启全局自定义属性支持 #

你可以在初始化HTML解析器和序列化器时，通过配置选项开启allow_custom_attrs，让解析器保留所有自定义属性：

use Masterminds\HTML5;

// 配置解析器选项，开启自定义属性支持
$config = [
    'allow_custom_attrs' => true,
    // 可选：如果需要保留Mustache模板语法（{{ }}），开启此选项
    'disable_html_ns' => true,
];

// 初始化HTML5实例
$html5 = new HTML5($config);

// 加载原始HTML内容
$dom = $html5->loadHTML($yourOriginalFormHtml);

// 输出处理后的HTML
$processedHtml = $html5->saveHTML($dom);

方法2：精确指定要保留的自定义属性 #

如果你只想保留Vue相关的属性（比如@开头、v-开头的指令），可以用custom_attrs选项精准匹配：

$config = [
    'custom_attrs' => [
        // 匹配所有@开头的属性
        '/^@/',
        // 匹配所有v-开头的属性
        '/^v-/',
        // 也可以单独指定具体属性，比如：
        // '@submit.prevent',
        // 'v-validator'
    ],
    'disable_html_ns' => true, // 可选：保留Mustache模板语法
];

$html5 = new HTML5($config);
// 后续加载和保存步骤同上

额外注意事项 #

• 若你的HTML中包含Mustache模板语法（如{{ formitem.data.formStyle }}），务必开启disable_html_ns选项，否则解析器可能会将这类内容识别为无效HTML进行处理。
• 建议使用Masterminds/html5-php的最新版本，旧版本在自定义属性的兼容性上可能存在bug。

内容的提问来源于stack exchange，提问作者SPQRInc