TypeScript parse5.parseFragment函數代碼示例

 test('prepend', () => {
   const orderedList =
       parse5.parseFragment(`<ol><li>1<li>2<li>3<li>4<li>5</ol>`);
   const ol = orderedList.childNodes![0]!;
   const li3 = ol.childNodes![2]!;
   ast.prepend(ol, li3);
   assert.equal(
       parse5.serialize(ol.parentNode!),
       parse5.serialize(
           parse5.parseFragment(`<ol><li>3<li>1<li>2<li>4<li>5</ol>`)));
 });

export function addCustomElementsEs5Adapter(html: string): string {
  // Only modify this file if we find a web components polyfill. This is a
  // heuristic to identify the entry point HTML file. Ultimately we should
  // explicitly transform only the entry point by having the project config.
  if (!webcomponentsLoaderRegex.test(html)) {
    return html;
  }
  const parsed = parse5.parse(html, {locationInfo: true});
  const script = dom5.query(parsed, webcomponentsLoaderMatcher);
  if (!script) {
    return html;
  }

  // Collect important dom references & create fragments for injection.
  const loaderScriptUrl = dom5.getAttribute(script, 'src')!;
  const adapterScriptUrl =
      url.resolve(loaderScriptUrl, 'custom-elements-es5-adapter.js');
  const es5AdapterFragment = parse5.parseFragment(`
    <script>if (!window.customElements) { document.write('<!--'); }</script>
    <script type="text/javascript" src="${adapterScriptUrl}"></script>
    <!--! do not remove -->
`);

  dom5.insertBefore(script.parentNode!, script, es5AdapterFragment);
  return parse5.serialize(parsed);
}

  private async processFile(file: File): Promise<File> {
    if (file.path !== this.entrypoint) {
      return file;
    }
    const contents = await getFileContents(file);
    const document = parse5.parse(contents);

    const babelHelpersFragment =
        parse5.parseFragment('\n\n<script></script>\n\n');
    dom5.setTextContent(
        babelHelpersFragment.childNodes![1]!,
        await fs.readFile(
            path.join(__dirname, 'babel-helpers.min.js'), 'utf-8'));

    const firstScriptOrImport = dom5.nodeWalk(document, scriptOrImport);
    if (firstScriptOrImport) {
      dom5.insertBefore(
          firstScriptOrImport.parentNode!,
          firstScriptOrImport,
          babelHelpersFragment);
    } else {
      const head =
          dom5.query(document, dom5.predicates.hasTagName('head')) || document;
      dom5.append(head, babelHelpersFragment);
    }

    const newFile = file.clone();
    newFile.contents = new Buffer(parse5.serialize(document), 'utf-8');
    return newFile;
  }

 test('accepts document fragments', () => {
   const fragment = parse5.parseFragment('<span></span>foo');
   dom5.insertAfter(dom, span, fragment);
   assert.equal(
       parse5.serialize(dom),
       '<div></div><span></span><span></span>footext');
   assert.equal(fragment.childNodes!.length, 0);
 });

 test('inSourceOrder', () => {
   const html = parse5.parseFragment(`
         <span>oh</span><span>hi</span>
         <span>good</span>
       <span>bye</span>
     `, {locationInfo: true});
   const spans = dom5.queryAll(html, dom5.predicates.hasTagName('span'));
   assert.isTrue(ast.inSourceOrder(spans[0], spans[1]), 'oh -> hi');
   assert.isTrue(ast.inSourceOrder(spans[0], spans[3]), 'oh -> bye');
   assert.isTrue(ast.inSourceOrder(spans[2], spans[3]), 'good -> bye');
   assert.isFalse(ast.inSourceOrder(spans[3], spans[1]), 'bye <- hi');
   assert.isFalse(ast.inSourceOrder(spans[1], spans[0]), 'hi <- oh');
 });

  const injectScript = (js: string) => {
    const fragment = parse5.parseFragment('<script></script>\n');
    dom5.setTextContent(fragment.childNodes![0], js);

    const firstJsScriptOrHtmlImport =
        dom5.query(document, isJsScriptOrHtmlImport);
    if (firstJsScriptOrHtmlImport) {
      dom5.insertBefore(
          firstJsScriptOrHtmlImport.parentNode!,
          firstJsScriptOrHtmlImport,
          fragment);

    } else {
      const headOrDocument =
          dom5.query(document, dom5.predicates.hasTagName('head')) || document;
      dom5.append(headOrDocument, fragment);
    }
  };