Node.js document word count output in a element id

Question

I am having tough time with this code that should read a microsoft word's document file and output the number of words into a div element.

I tried everything and the code outputs the number of word into console but not in the div. Please help me here. Thank you so much

Here is my html page


<div id="demo"></div>

<script src="script.js"></script>

Here is my script.js



// Installed mammoth using npm

var mammoth = require("mammoth");



// I have a doc file with some sample content

var docxFile = "file.docx";



// Below is my function to count the number of words on that document

function WordCount(str) { 
    return str.split(" ").length;
    }


// Below is my Mammoth module extracts the text from my docx file and the function above counts the word for me and displays on the console. I want to be able to display it on my HTML page.


mammoth.extractRawText({path: docxFile})
    .then(function(result){
        var text = result.value; // The raw text
        console.log("Word Count: " + WordCount(text)); 


   // Below is what I want to do. but its not working.

        document.getElementById('demo').innerHTML = (WordCount(text)); 

    })
    .done();

The above code should display the number of words from the file.docx into the div element ID "demo" but its not doing so. please help

What does `console.log(text)` show? – Jack Bashford Apr 19 '19 at 06:29 — Jack Bashford, Apr 19 '19 at 06:29
@JackBashford it shows the content of the docx file – Aguntuk Rahman Apr 19 '19 at 06:48 — Aguntuk Rahman, Apr 19 '19 at 06:48

score 0 · Answer 1 · answered Apr 19 '19 at 09:24

0

You are making a confusion between js frontend script and Nodejs backend usage of Mammoth package.

If you run your below script with Nodejs, there is no way to update directly your div element because document doesn't make sense in this context.

Fatal ReferenceError: document is not defined

In this case you could use an ajax call from your frontend page to update the value of your div.

On the other hand, if you want to use Mammoth directly from the browser, the documentation suggests to use the dedicated version mammoth.browser.js

Note you will have to setup a file reader to load your docx file before processing. You can have a look at the browser demo for an example of implementation.

answered Apr 19 '19 at 09:24

TGrif

5,725
9
31
52

Thank you for the reply. I am still learning NodeJS. There are so many backend packages for NodeJS. What's the point of those package if I can't use them on the front end? For example in what situation I am going to need Mammoth for backend? I really wanted to make a script so when someone uploads a doc or docx file the script will tell me how many words they have on the html page. Do you think nodejs is the way to go or php or something else is good for this? @TGrif – Aguntuk Rahman Apr 20 '19 at 03:39
Historically JavaScript is a scripting language used in html page to add dynamic features. Since Nodejs, we can use JavaScript server side, for exemple to make a web server. If you want to make a cli app, you can use Mammoth at backend, but if you want to create a web app, you will probably need a server and frontend script, depending on how you structure your app. – TGrif Apr 20 '19 at 07:32

score 0 · Answer 2 · answered Nov 17 '19 at 20:32

In order to pass the text value back to the client, you need to render that as a local variable in your http response. I am assuming for simplicity that you are using a server side framework such as express and you are rendering the page without using template engines.

Then you server side code should look like this:

mammoth.extractRawText({path: docxFile}) 
    .then(function(result){
        var text = result.value; // The raw text
        var textLength = text.length; 

        // use textLength as a local variable and pass it to the client

        res.render("the_page_you_want_to_render", { textLength: textLength }, function(err, html){
            if (err) return new Error(err);
            res.send(html);
        }

    })
    .done();

Now you use a placeholder in your frontend code so that you can display that local variable being passed by the server:

<div id="whatever" class="youwant">
    #textLength#
</div>

Since I am assuming you are not using any particular template engine, add this code to your server entry point so that it can renders html pages with your local variables:

app.engine('html', function (filePath, options, callback) {
  fs.readFile(filePath, function (err, content) {
    if (err) return callback(err);

    var rendered = content.toString()
    // this is where the magic happens
      .replace('#textLength#', '<p>' + options.textLength + '</p>');

    return callback(null, rendered)

  });

});

Node.js document word count output in a element id

2 Answers2