解析 HTML 代码并保留原始大小写

编程问答 2022-05-12

问题描述

我正在处理一个 Angular 项目，同时我需要操作模板文件并进行一些修改（添加 id 等），为了进行这些修改，我使用 JSDOM 来解析 HTML 文件并操作它们HTML 元素，JSDOM 遇到的问题是它将 HTML 文件中的所有属性和标签名称小写，并且由于 Angular 解析器区分大小写（与不区分大小写的 HTML 解析器不同）所以我想保留所有HTML 文件的原始大小写，是否有任何选项可以配置 JSDOM，以便为解析的 HTML 文档保留原始大小写？如果这是不可能的，是否有任何替代方法，以便我可以解析模板代码并使用另一个解析器操作其元素？
用于更多理解的 TypeScript 代码示例：

        files.forEach(file => {

        let html = fs.readFileSync(file,"utf-8");
        html=html.replace(/%/g,'--pct--'); //Replacing the '%' sign to avoid errors when decoding html file
        html = decodeURIComponent(html); 
        html=html.replace(/--pct--/g,'%');
        console.log(html);
        /*Html original file :
        <ckeditor #ckEditor
        [(ngModel)]="contentWithTags.content"
        [readonly]="false"
        (change)="changes($event)"
        debounce="500"
        *ngIf="items_research && items_research.length>0"
        [config]="ckeConfig">
        </ckeditor>
        */
        console.log("---------------------------------------");
        var dom = new JSDOM(html);
        doc = dom.window.document;
        /* Some manipulation code on document 
        .
        .
        */
        var finalResult = doc.documentElement.outerHTML;
        console.log(finalResult);
        /* Final result:
        <ckeditor #ckeditor="" 
        [(ngmodel)]="contentWithTags.content" 
        *ngif="items_research &amp;&amp;   
        items_research.length>0" 
        [readonly]="false" 
        (change)="changes($event)" 
        debounce="500" 
        [config]="ckeConfig">
        </ckeditor>
        */
        fs.writeFile(file,finalResult,err => { //Saving the result file after manipulation
        console.log('done');
        });
    })

编辑 1：

我需要一个 DOM 解析器来解析字符串中的 HTML 代码，给我整个文档及其元素（这在 JSDOM 上是可能的）并保留文档元素的原始大小写（这在 JSDOM 上是不可能的）>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularangular-templatehtml-parsingjavascriptjsdomjsdom