如何在字符串中通过data属性获取元素并在node.js应用程序中获取内部文本？

Question

I`am new to node and I hope my question is not too ugly. Thanks.

There is a node app and a part of it result in a stream of a html site.

.pipe(tap(function(file) {
    var content = file.contents.toString(),
        relPathPrefix = path.join(path.relative(file.path, './source'));

    relPathPrefix = relPathPrefix
        .replace(new RegExp('\\' + path.sep, 'g'), '/') // Normalize path separator
        .replace(/\.\.$/, ''); // Remove trailing ..

    content = content.replace(/('|")\//g, '$1' + relPathPrefix);
    //console.log(content)

    //here is where i`am struggling 

    file.contents = Buffer.from(content);
}))

The variable "content" hold the full website data. Now I have to parse the the variable "content" and i will find the data-attribute "data-type" with value "meta.code.data" and then get the textContent. At least, I will sripe out the text itself from a value like "...innerText...".

I know how to do that in Browser with jQuery:

var json = $('pre[data-type="meta.code.data"]').text()

and also with vanilla JavaScript

var json = document.querySelectorAll('[data-type="meta.code.data"]')[0].textContent;

but actually I do not find the way to parse a string/variable I thought about something like

content = content.contains('[data-type="meta.code.data"]')[0].textContent;

but this does not work.

Answer 1

It's not the same, browser parses DOM and here you have a string with all website data, so old techniques won't work. I would personally try using the DOM parser (altho I never tried to use that in Node application) but it seems there is npm package that works basically the same.

I assume you have already used npm with Node so here is a link to the exact module: https://www.npmjs.com/package/xmldom

Here is example how it functions:

var DOMParser = require('xmldom').DOMParser;
var doc = new DOMParser().parseFromString(
    '<xml xmlns="a" xmlns:c="./lite">\n'+
        '\t<child>test</child>\n'+
        '\t<child></child>\n'+
        '\t<child/>\n'+
    '</xml>'
    ,'text/xml');
doc.documentElement.setAttribute('x','y');
doc.documentElement.setAttributeNS('./lite','c:x','y2');
var nsAttr = doc.documentElement.getAttributeNS('./lite','x')
console.info(nsAttr)
console.info(doc)

As you can see you can now use things you would use in the browser, and since you already know how to do that your problem is now gone ;)

I would recommend parsing DOM directly over parsing that string with regex etc. There are numerous reasons if you google what approach is better.

Answer 2

as @JonasW commented out, the use of cheerio did the trick.

First declare cheerio at the top of your module:

const cheerio = require('cheerio');

then load content and parse data:

const $ = cheerio.load(content)
content = $('pre[data-type="meta.code.data"]').text()

in summary:

.pipe(tap(function(file) {
    var content = file.contents.toString(),
        relPathPrefix = path.join(path.relative(file.path, './source'));

    relPathPrefix = relPathPrefix
        .replace(new RegExp('\\' + path.sep, 'g'), '/') // Normalize path separator
        .replace(/\.\.$/, ''); // Remove trailing ..

    content = content.replace(/('|")\//g, '$1' + relPathPrefix);

    //GET ONLY JSON DATA FROM STREAM
    const $ = cheerio.load(content)
    content = $('pre[data-type="meta.code.data"]').text()

    file.contents = Buffer.from(content);
}))