cssクラスまたはxmlタグのいずれかでコードを削除するツールをグループ

Question

gulpプロセスで実行される特定のxmlタグを削除するツールを作成しようとしています。フロントエンドにはダミーのコンテンツがあるという考えがあります。しかし、バックエンド統合の次の段階では、ダミーのコンテンツをXMLタグでラップし、xmlタグ名に基づいた変数でバックエンドコードを動的に挿入します。この場合はPHPがありますが、バックエンドコードを挿入するためのツールを作成することです。

私はgulp-remove-codeに出くわしましたが、その問題はすべてハードコードされた名前との正規表現ですノードモジュールは特定のスペースのコメントに基づいて一致します。 「

私はタグの前に新しいコンテンツを配置する。最後のアイデアは、XMLのタグ名をタグ付け、タグの上に新しいコードを挿入し、タグのすべてを削除することですので gulp-inject-string見てきました。また

。

//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.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> 

Answer 1

になります。

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; 
}) 

私はちょうどregExpアプローチと考えていましたが、それはあなたが言及したようにおそらくあまりにも脆いでしょう。私はまた、あなたの目標に向かって長い道のりを得て、知っておくと便利だと考えたsanitize-htmlと考えました。

htmlparserとxmldomのような他のhtml/domパーサーがありますが、jsdomは私にとっては最も簡単な方法でした。

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

のforeach呼び出しの各々に現れる：

このコードの主な脆い部分が線です。あなたのdom構造があなたの例と異なり、タグがel.childNodes 1でない場合、このコードを修正する必要があります。そして、空のtextNodesに注意してください。私は空のtextNodesをスキップするセレクタを思い出しているようですが、今は思い出すことができません。

これがうまくいくかどうか教えてください。

Answer 2

バッファは、関数に渡すfile.contentsを取得するgulpストリームからのものです。次に、内容がヌルではない間に、各文書の一致量を取得し、ループスルーして、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); 
    }