How to use the cheerio function in cheerio

function extractAssets(compilation: any): IAssets {
  const appChunkGroup = compilation.chunkGroups.find((group: any) => group.name === 'app');
  const files: string[] = !appChunkGroup ? [] : appChunkGroup.chunks
    .map((item: any) => item.files)
    .reduce((acc: string[], cur: string[]) => acc.concat(cur), []);

  // try to extract favicons html from compilation
  const compiledStaticHtml = compilation.assets['index.html'].source();
  const staticDom = $(compiledStaticHtml);
  const links = staticDom.filter(i => staticDom[i].name === 'link');

  return {
    javascript: files.filter(file => /\.js$/.test(file)),
    styles: files.filter(file => /\.css$/.test(file)),
    favicons: links.toArray(),
  };
}

title: string,
    level: number
  ): Promise {
    const heading = cheerio(``);
    heading.text(title);

    const list = cheerio("<div>");

    const section = cheerio("<div>");
    section.append(heading, list);

    for (const key of Object.keys(examples).sort(collator.compare)) {
      const example = examples[key];

      if (isExample(example)) {
        const header = cheerio("<div>").append(
          // Title
          cheerio("<a>")
            .attr("href", example.path)
            .text(key),
          // JSFiddle
          cheerio("<span>")
            .addClass("playgrounds")
            .append(
              this._generateJSFiddle(example),
              this._generateCodePen(example)
            )
        );

        const image = cheerio("</span></a><a>")
          .attr("href", example.path)
          .append(</a></div></div></div>

ensureAbsoluteLinks(str, baseUrl) {
        const html = $('<div>' + str + '</div>');
        // eslint-disable-next-line no-unused-vars
        html.find('a').each(function(i, elem) {
          let link = $(this).attr('href');
          link = data.util.url.ensureAbsoluteLink(link, baseUrl);
          $(this).attr('href', link);
        });
        return html.html();
      }
    }

private async _processGroup(
    examples: Examples,
    title: string,
    level: number
  ): Promise {
    const heading = cheerio(``);
    heading.text(title);

    const list = cheerio("<div>");

    const section = cheerio("<div>");
    section.append(heading, list);

    for (const key of Object.keys(examples).sort(collator.compare)) {
      const example = examples[key];

      if (isExample(example)) {
        const header = cheerio("<div>").append(
          // Title
          cheerio("<a>")
            .attr("href", example.path)
            .text(key),
          // JSFiddle
          cheerio("<span>")
            .addClass("playgrounds")
            .append(
              this._generateJSFiddle(example),</span></a></div></div></div>

export const renderComplexRuby = $ruby => {
  $ruby = $( $ruby ).clone()

  const $$rtc = $ruby.find( 'rtc' )
  let $$rb    = $ruby.find( 'rb' )
  let $$ru    = Array.from( $$rb )
  let maxspan = $$rb.length
  let $zhuyin

  Array.from( $$rtc ).map( simplifyRubyClass )
  $zhuyin = $$rtc.filter( '.zhuyin' ).first()

  // Deal with Zhuyin `` container individually.
  //
  // **Note that** only one Zhuyin container are
  // supported in each complex ruby.
  if ( $zhuyin.length ) {
    $$ru = Array.from($zhuyin.find( 'rt' ))

private _generateJSFiddle(example: Example): Cheerio {
    const data = this._generatePlaygroundData(example);

    const form = cheerio("<form>");
    form.attr("action", "http://jsfiddle.net/api/post/library/pure/");
    form.attr("method", "post");
    form.attr("target", "_blank");
    form.append(
      cheerio("<button>")
        .addClass("icon jsfiddle")
        .attr("alt", "JSFiddle")
        .attr("title", "JSFiddle")
        .html("&nbsp;") // No break space helps align the icon better.
    );

    // JavaScript
    form.append(
      cheerio("<input>")
        .attr("type", "hidden")
        .attr("name", "js")</button></form>

export function loadFixture (name) {
    return $(fs.readFileSync(FIXTURE_DIR + name + '.html').toString());
}

export const getZhuyinHTML = $rt => {
  let zhuyin, yin, diao, len

  zhuyin = typeof $rt === 'string'
    ? $rt
    : $( $rt ).text()

  yin  = zhuyin.replace( TYPESET.zhuyin.diao, '' )
  len  = yin ? yin.length : 0
  diao = zhuyin
    .replace( yin, '' )
    .replace( /\u02C5/g, '\u02C7' )
    .replace( /\u030D/g, '\u0358' )

  return `${yin}${diao}`
}

function templateContent() {

  const html = fs.readFileSync(frameworkConfig['entry-html']).toString();

  if (!dllPlugin) { return html; }

  const doc = cheerio(html);
  const body = doc.find('body');
  const dllNames = !dllPlugin.dlls ? ['reactBoilerplateDeps'] : Object.keys(dllPlugin.dlls);
  dllNames.forEach(dllName => body.append(``));

  return doc.toString();
}

if ( typeof this !== 'object' ) {
      return
    } else if ( typeof this.replaceWith === 'function' ) {
      return this.replaceWith( content )
    }

    const parent = this.parent || this.root

    if ( !parent || !Array.isArray( parent.children )) {
      return
    }

    let sib = parent.children
    let idx = sib.indexOf( this )
    let newNode = typeof content === 'string' ?
      $( content ) : content

    if ( idx < 0 )  return
    if ( !newNode.type && newNode[0] )  newNode = newNode[0]

    sib[ idx ] = newNode
    return sib[ idx ]
  },