Giter Site home page Giter Site logo

Comments (2)

bembleton avatar bembleton commented on May 22, 2024

@evanderkoogh I would like an end method added to ElementHandler as well. But in the meantime, instead of saving and rewriting the entire head, you can use removeAndKeepContent to strip the start and close tags and write them back in yourself as needed. This trick only works if you can detect the start of the next element, but this seems to work pretty well for the <head>. You can also add content to <body> in the same way, but you have to handle the <html> element as well, and use a document end handler to rewrite the body closing tag:

let headContent = '';
let bodyContent = '';

const stripEndTag = (el) => {
  const attrs = [...el.attributes].map(([k, v]) => `${k}="${v}"`);
  const tag = attrs.length > 0
    ? `<${el.tagName} ${attrs.join(' ')}>`
    : `<${el.tagName}>`;
  el.prepend(tag, { html: true });
  el.removeAndKeepContent();
};

const resp = new HTMLRewriter()
  .on('html', {
    element: (html) => {
      stripEndTag(html);
    }
  })
  .on('head', {
    element: (head) => {
      stripEndTag(head);
    }
  })
  .on('head > link', {
    element: () => {
      headContent = '<!-- has some links -->';
    }
  })
  .on('body', {
    element: (body) => {
      body.before(`${headContent}</head>`, { html: true });
      stripEndTag(body);
    }
  })
  .on('body *', {
    element: () => {
      bodyContent = "<!-- extra content -->";
    }
  })
  .onDocument({
    end: (doc) => {
      doc.append(`${bodyContent}</body></html>`, { html: true });
    }
  });

from lol-html.

mitsuhiko avatar mitsuhiko commented on May 22, 2024

I ran into similar issue in a slightly different setup. What I'm trying to do is to "ignore" all content outside of CSS selectors. That can in theory be accomplished by communicating between HtmlRewriter and OutputSink. The entire setup isn't even that ugly. However the current solution involving on_end_tag runs my callback before the end tag is written (#108) which means it's not possible to implement this correctly. The flipping of the flag happens before the sink is instructed to write the end tag so I'm generally losing out on it.

I believe there is a need for two end tag handlers: one for where you still have the chance to modify the tag, and one where you already exited it. The latter is needed for properly maintaining a stack of elements of interest if that is needed.

from lol-html.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.