taoqf / node-html-parser

A very fast HTML parser, generating a simplified DOM, with basic element query support.
MIT License
1.12k stars 112 forks source link

`querySelectorAll` doesn't match elements within a `<script>` tag #282

Open zedtux opened 1 month ago

zedtux commented 1 month ago

Given an Angular HTML template being something like the following:

<div class="card">
  <div ng-include="'app/templates/_something.html'"></div>

  <div ng-include="'my_template.html'"></div>

  <script type="text/ng-template id="my_template.html">
    <div class="card">
      <div class="card-body">
        <div ng-include="'app/templates/_filters.html'"></div>
      </div>
    </div>
  </script>
</div>

When I try to match all the ng-include from that HTML code using the following JavaScript code:

const { parse } = require('node-html-parser');

const angularHtmlTemplate = `<div class="card">
  <div ng-include="'app/templates/_something.html'"></div>

  <div ng-include="'my_template.html'"></div>

  <script type="text/ng-template id="my_template.html">
    <div class="card">
      <div class="card-body">
        <div ng-include="'app/templates/_filters.html'"></div>
      </div>
    </div>
  </script>
</div>`

const parsedContent = parse(angularHtmlTemplate)

const ngIncludes = parsedContent.querySelectorAll("*[ng-include]")
console.log('ngIncludes are:')
ngIncludes.forEach((ngInclude) => console.log(ngInclude.getAttribute('ng-include')))

This show me only the 2 first ng-include, the one included within the script template is ignored:

ngIncludes are:
'app/templates/_something.html'
'my_template.html'

While if I change the <script> tag as <div> tag, querySelectorAll returns 3 items as expected.