Html 通过css类或xml标记删除代码的Gulp工具

我正在尝试创建一个工具，它可以删除在吞咽过程中运行的特定xml标记。我们的想法是，对于前端，我们有虚拟内容。但是，在后端集成的下一个阶段，它会将虚拟内容包装在xml标记中，并使用基于xml标记名的变量动态插入一些后端代码。对于这种情况，有php，但其想法是创建一个工具来插入任何后端代码

我遇到过

gulp remove code

，但问题是它的所有硬编码名称以及节点模块中

index.js

中的正则表达式都是基于带有特定空格的注释匹配的。"

此外，我还研究了将

gulpinjectstring

放置在标记新内容之前。因此，最后的想法是标记xml标记名，在标记上方插入新代码，然后删除标记中的所有内容

//markup.html

<div class="home">
  // some text
  <div class="home__text">
    <cms_home_text>
      My dummy text
    </cms_home_text>
  </div>

  // an image
  <div class="home__image">
    <cms_home_image>
     <img src="someImage.png" alt="some alt" />
    </cms_home_image>
  </div>

  // a link
  <div class="home__link">
    <cms_home_link1>
     <a href="someLink1.html">here</a>
    </cms_home_link1>
  </div>

  // another link
  <div class="home__link">
    <cms_home_link2>
     <a href="someLink2.html">here</a>
    </cms_home_link2>
  </div>
</div>

//markup.html
//一些文本
我的虚拟文本
//形象
//链接
//另一环节

变为

//markup.php

<div class="home">
  // some text
  <div class="home__text">
    <?php $cms_home_text ?>
  </div>

  // an image
  <div class="home__image">
    <img src="<?php $cms_home_image ?>" alt="<?php $cms_home_image_alt ?>" />
  </div>

  // a link
  <div class="home__link">
    <a href=<?php $cms_home_link1 ?>"> 
      <?php $cms_home_link1_text ?> 
    </a>
  </div>

  // another link
  <div class="home__link">
    <a href=<?php $cms_home_link2 ?>"> 
      <?php $cms_home_link2_text ?> 
    </a>
  </div>
</div>

//markup.php
//一些文本
//形象
“alt=”“/>
//链接
//另一环节

我尝试了一些方法，但成功了，我想这是你想要的

const gulp = require("gulp");
const fs = require('fs');

const jsdom = require("jsdom");
const { JSDOM } = jsdom;

// hard-coded here but could be a gulp.src stream if you have more than one file to translate
const html = 'markup.html';

gulp.task('default', [addPHP]);

gulp.task('addPHP', function () {

  var dirty;
  var temp;
  var clean;

  dirty = fs.readFileSync(html, 'utf8');

  var frag = new JSDOM(dirty);

  console.dir(frag.window.document.body.children[0].children);

  var HLinks = frag.window.document.querySelectorAll("div.home__link");
  var HImages = frag.window.document.querySelectorAll("div.home__image");
  var HTexts = frag.window.document.querySelectorAll("div.home__text");

//   <div class="home__text">
//      <cms_home_text>
//        My dummy text
//      </cms_home_text>
//    </div>

//    <div class="home__text">
//      <?php $cms_home_text ?>
//     </div>

  HTexts.forEach(function (el, index, list) {
    console.log(el.className);

    var cmsTagName = el.childNodes[1].nodeName.toLowerCase();
    console.log(cmsTagName);

    var innerLink = frag.window.document.createTextNode("<?php $" + cmsTagName + "_text ?>");
    el.replaceChild(innerLink, el.childNodes[1]);
  });

//   <cms_home_image>
//      <img src="someImage.png" alt="some alt" />
//   </cms_home_image>

//  <img src="<?php $cms_home_image ?>" alt="<?php $cms_home_image_alt ?>" />

  HImages.forEach(function (el, index, list) {
    console.log(el.className);
    var cmsTagName = el.childNodes[1].nodeName.toLowerCase();
    console.log(cmsTagName);
    var temp = frag.window.document.createElement("img");
    temp.src = "<?php $" + cmsTagName + " ?>";
    temp.alt = "<?php $" + cmsTagName + "_alt ?>"

    el.replaceChild(temp, el.childNodes[1]);
  });

//   <cms_home_link1>
//        <a href="someLink1.html">here</a>
//  </cms_home_link1>

//   <a href="<?php $cms_home_link1 ?>">
//       <?php $cms_home_link1_text ?>
//   </a>

  HLinks.forEach(function (el, index, list) {
    console.log(el.className);

    var cmsTagName = el.childNodes[1].nodeName.toLowerCase();
    console.log(cmsTagName);
    var tempLink = frag.window.document.createElement("a");
    tempLink.href = "<?php $" + cmsTagName + " ?>";

    var innerLink = frag.window.document.createTextNode("<?php $" + cmsTagName + "_text ?>");
    tempLink.appendChild(innerLink);

    el.replaceChild(tempLink, el.childNodes[1]);
  });

  // because createTextNode changes <> to htmlEntities
  var cleaned = frag.window.document.querySelector("div.home").outerHTML.replace(/&lt;/gm, "<").replace(/&gt;/gm, ">");


  fs.writeFileSync("markup.php", cleaned, 'utf8');
  return;
})

出现在每个forEach调用中。如果dom结构与示例不同，因此标记不是el.childNodes，则必须修改此代码。并注意空文本节点。我似乎想起了一个选择器，它会跳过空的文本节点，但我现在想不起来了

---

让我知道这是否适用于您。

缓冲区来自一个吞咽流，该流获取要传递给函数的file.contents。然后，当内容不为null时，我们获取每个文档中的匹配数量，然后循环并获取reg-ex的对象匹配

我们提取完整的匹配项、ID和类型，然后替换为动态php代码，这样前端就可以有自定义变量，以及文本、图像和链接的特定响应

function applyReplacements(buffer) {
        var contents = buffer.toString('utf8');
        const regex = /<(cms_.*)(.\b[^>]*)\b[^>]*>((.|\n)*?)<\/\1>/g;
        let m,cmsReplace,finalMatch,cmsID,cmsType;
        if (contents.length > 0) {
            while ((m = regex.exec(contents)) !== null) {
                let target = contents.match(regex).length;
                for(let i=0;i< target;i++){
                    //This is necessary to avoid infinite loops with zero-width matches
                    if (m.index === regex.lastIndex) {
                        regex.lastIndex++;
                    }    
                    // The result can be accessed through the `m`-variable.
                    m.forEach((match, groupIndex) => {
                        if(groupIndex == 0){
                            cmsReplace = match;
                        }
                        else if(groupIndex == 1) {
                            cmsID = match;
                        }
                        else if(groupIndex == 2) {
                            cmsType = match.split('"')[1];
                            // provide the final replacment variables 
                            if(cmsType == "cmsImage") {
                                finalMatch = '<img src="<?php $'+cmsID+'?>" alt="<?php $'+cmsID+'_alt ?>" width="100%" height="100%" />'; 
                            } else if(cmsType == "cmsLink") {
                                finalMatch = '<a href="<?php $'+cmsID+' ?>"><?php $'+cmsID+'_text ?></a>'; 
                            } else {
                                finalMatch = '<?php $'+cmsID+' ?>'; 
                            }
                            contents = contents.replace(cmsReplace,finalMatch);
                        }
                    });
                }
            }
        }
        return new Buffer(contents);
    }

函数应用程序替换（缓冲区）{
var contents=buffer.toString（'utf8'）；
常量正则表达式=/]*）\b[^>]*>（（.|\n）*？）/g；
设m，cmsReplace，finalMatch，cmsID，cmsType；
如果（contents.length>0）{
while（（m=regex.exec（contents））！==null）{
让target=contents.match（regex）.length；
for（设i=0；i{
if（groupIndex==0）{
cmsReplace=匹配；
}
else if（groupIndex==1）{
cmsID=匹配；
}
else if（groupIndex==2）{
cmsType=match.split（“”）[1]；
//提供最终的替换变量
如果（cmsType==“cmsImage”）{
最终匹配=““alt=”“width=“100%”height=“100%”/>”；
}else if（cmsType==“cmsLink”）{
最终匹配=“”；
}否则{
最终匹配=“”；
}
内容=内容。替换（CMS替换，最终匹配）；
}
});
}
}
}
返回新的缓冲区（内容）；
}

嘿，马克，谢谢你回来，这太棒了。我还将发布我在黑客攻击2天后想出的解决方案。我采用了正则表达式的方法。将测试您的代码出tmoz，看看哪一个更快。

function applyReplacements(buffer) {
        var contents = buffer.toString('utf8');
        const regex = /<(cms_.*)(.\b[^>]*)\b[^>]*>((.|\n)*?)<\/\1>/g;
        let m,cmsReplace,finalMatch,cmsID,cmsType;
        if (contents.length > 0) {
            while ((m = regex.exec(contents)) !== null) {
                let target = contents.match(regex).length;
                for(let i=0;i< target;i++){
                    //This is necessary to avoid infinite loops with zero-width matches
                    if (m.index === regex.lastIndex) {
                        regex.lastIndex++;
                    }    
                    // The result can be accessed through the `m`-variable.
                    m.forEach((match, groupIndex) => {
                        if(groupIndex == 0){
                            cmsReplace = match;
                        }
                        else if(groupIndex == 1) {
                            cmsID = match;
                        }
                        else if(groupIndex == 2) {
                            cmsType = match.split('"')[1];
                            // provide the final replacment variables 
                            if(cmsType == "cmsImage") {
                                finalMatch = '<img src="<?php $'+cmsID+'?>" alt="<?php $'+cmsID+'_alt ?>" width="100%" height="100%" />'; 
                            } else if(cmsType == "cmsLink") {
                                finalMatch = '<a href="<?php $'+cmsID+' ?>"><?php $'+cmsID+'_text ?></a>'; 
                            } else {
                                finalMatch = '<?php $'+cmsID+' ?>'; 
                            }
                            contents = contents.replace(cmsReplace,finalMatch);
                        }
                    });
                }
            }
        }
        return new Buffer(contents);
    }