Front End Parsing HTML

Ask the community
,
1

I am trying to retrieve meta data from a website that the user types into a form on my Wix site.
I fetch the HTML successfully but as soon as I add Cheerio or htmlparser2, i get the same error:

714×104 25.2 KB

here is my exact code:


$w.onReady(function () {
    $w("#button2").onClick(() => {
        console.log('clicked GO')
        scrape(url)
    })
    let url
    $w("#input4").onKeyPress((event) => {
        url = $w("#input4").value
        console.log(url)
        if (event.key === "Enter") {
            console.log('enter')
            scrape(url)
        }
    });
});

function scrape(url) {
    fetch(url).then(response => {
        return response.text()
    }).then(html => {
        // const cheerio = require('cheerio')
        // let doc = cheerio.load(html)
        const htmlparse = require('htmlparser2');
        let doc = htmlparse.parseDocument(html)

        // let title = 'test title'
        let title =
            doc("title").text() ||
            doc('meta[property="title"]').attr("content") ||
            doc('meta[property="og:title"]').attr("content") ||
            "_no_title_found";

        $w("#text15").text = title + " | Length: " + title.length

    }).catch(function (err) {
        console.warn('err: ', err);
    });

}

I have tried with both import and require.
I have tried putting the require outside the onReady block, just inside the onReady block, and just before the actual call (as shown).
I have definitely installed the cheerio and htmlparser2 packages

  1. Is this even possible on to do in the front end?
  2. Is there another way to parse HTML?
  3. Why does the error refer to htmlparser2 even when I use cheerio?
2

  1. instead of import, use “require”.

  2. yes, I use htmlparser2. But that also needs “require” instead of “import”.

3

Thank you Giri.
I used require, same error.
I tried htmlparser2 (with require) and same error.
I have tried adding the require both inside the onReady block and outside.
I just updated the question with my exact code for reference.
Could you please provide an example code block that works for you? I must be missing something simple…
Everything runs fine until I add the require function and then the entire script breaks with the htmlparser2/lib error

4

This is a part of my backend code, inside a function

    console.log("Starting_require");
    var htmlparser = require("htmlparser2");
    console.log("Ending_require");
    let arrFutures = [];
    console.log("Starting_handler");
    var handler = new htmlparser.DomHandler(function (error, dom) {
        console.log("Ending_handler");
        if (error)
            console.log('error:', error);
        else {
            console.log("In_else_parser=" + dom);
            var tables = htmlparser.DomUtils.getElementsByTagName("table", dom); //find all tables

etc

5

I appreciate your continued help. I think maybe the issue is this might not be possible in Front-End Code. I am using it in Front-End, and this simple line breaks everything:

var htmlparser=require("htmlparser2");

gives same error

1130×90 45.2 KB