NodeでjQuery使用

Question

deprecateという感じですがNode環境ででjQueryを使えるようにしておく必要があり
以下のようにしましたが、jQueryのメソッドチェーンがfind()以降、
つなげることができません。jQueryのオブジェクトが返ってきていないようです

/*
  input.html の内容の一部を変更して output.html に書き込むというものです
*/

var $ = require('jquery');
var fs = require('fs');
var jsdom = require('jsdom');
const { JSDOM } = jsdom;

fs.readFile(__dirname + '/input.html', function (err, data) {
	if (err) throw err;
    let body = data.toString();
	const dom = new JSDOM(body);

    // Error(jQuery)
	let newBody = $(dom.window.window).find('h1')[0].text('Hello World').parents('html')[0].outerHTML;

	fs.writeFile(__dirname + '/output.html', newBody, 'utf-8', function(){
		if (err) throw err;
		console.log('done');
	});
});

$(dom.window.window).find('h1')まではブレークさせみてみると
'Array(1) [HTMLHeadingElement]'となってて
DOMそのものは取得できているようなのですが・・・
エラー発生箇所を以下のように書き換えると問題なく完了します

    // Done well(DOM)
	dom.window.document.querySelector("h1").innerHTML = 'Hello World';
	const newBody = dom.window.document.querySelector('html').outerHTML;

##（補足）
上記コード内の'$(dom.window.window)'の部分ですが jsdom の仕様を
見ていたりして思いついてやってます。こうしないと、そもそもjQueryが
「jQuery requires a window with a document」のエラーになります

もちろんこのコードに限ったことではないのですが
普通にjQueryが使用できる状況を得るにはどうすればいいでしょうか？

##（環境）
OSX HighSierra v.10.13.6
VS CODE v.1.27.2
Node v.8.6.0
jsdom v.12.0.0
jquery v.3.3.1

Answer 1

単にjQueryでのHTML操作方法が誤っています。

let newBody = $(dom.window.window).find('h1')[0].text('Hello World').parents('html')[0].outerHTML;

これをばらしてみましょうか

let newBody = $(dom.window.window)
  .find('h1')[0] // <-原因はこの[0]
  .text('Hello World')
  .parents('html')[0]
  .outerHTML;

jQueryオブジェクトは、配列アクセスを行うとHTMLのネイティブなエレメントに変換されます。
つまり、この時点でjQueryオブジェクトではなくなります。

続く.text(str)や.parents('html')はこれ全部jQueryオブジェクト想定ですよね？
最後の.outerHTMLのみHTMLのエレメント想定です

jQueryにはjQueryオブジェクト１個にアクセスする方法としてgetメソッドが存在していたはずです。
.get() - jQueryドキュメント公式

つまりこう書き直せば上手くいくんじゃないですかね？知らんけど。

let newBody = $(dom.window.window)
  .find('h1')
  .get(0)
  .text('Hello World')
  .parents('html')[0]
  .outerHTML;

Comments

[Fujiman]

「jQueryオブジェクトは、配列アクセスを行うとHTMLのネイティブなエレメントに変換される」というのは知りませんでした。ありがとうございます。ただ、やってみたのですが以下のエラーになります。
どうやら「$(dom.window.window) .find('h1')」コレ自体がフェイクjQueryみたいです（ｗ

TypeError: $(...).find(...).get is not a function

Answer 2

Node環境(global.documentが定義されていない環境)でrequire('jquery')を実行した場合、戻り値は普段のjQuery関数ではなく、引数にwindowオブジェクトを与えるとjQuery関数を返す関数になるようです。

• Githubのソースコード 当該箇所
• npmjs.com の説明文

const jqFactory = require('jquery');
const $ = jqFactory(windowObject);

なので、普段のjQuery関数$を得るには、質問文のコードで言えばdom.windowを指定する必要があります。
また、outerHTMLを取得する行にも修正を加える必要があります。

// 修正前
let newBody = $(dom.window.window).find('h1')[0].text('Hello World').parents('html')[0].outerHTML;

// 修正後
let newBody = $(dom.window.document).find('h1').eq(0).text('Hello World').parents('html')[0].outerHTML;

最終的なコードは下記の通りとなります。(Node v8.11.4で動作確認済)

var jqFactory = require('jquery');
var fs = require('fs');
var jsdom = require('jsdom');
const { JSDOM } = jsdom;

fs.readFile(__dirname + '/input.html', function (err, data) {
    if (err) throw err;
    let body = data.toString();
    const dom = new JSDOM(body);
    const $ = jqFactory(dom.window);

    let newBody = $(dom.window.document).find('h1').eq(0).text('Hello World').parents('html')[0].outerHTML;

    fs.writeFile(__dirname + '/output.html', newBody, 'utf-8', function(){
        if (err) throw err;
        console.log('done');
    });
});

Comments

[reosablo]

getメソッドは配列アクセスと同じくHTMLのネイティブなエレメントが返ってきてしまうので、eqメソッドを使うことになります。 https://api.jquery.com/eq/#eq-index

[Fujiman]

ありがとうございます。うまく処理できるようになりました。

普通（私のリサーチ力では）「戻り値は普段のjQuery関数ではなく」
facotoryが返ってるって・・・わかりません

教えてもらえなかったら行きつかなかったと思います（感謝）

[reosablo]

実は私も、この質問について調べる中でjQueryのソースコードを見るまでは知りませんでした。公式の説明もちょうどいいものが見つからなかったので、Web検索だけだと見つからなかったかもしれません。私自身勉強になるよいきっかけになりました。

Answer 3

getを使う方法が回答されているので別解でも書いときます。

let newBody = $($(dom.window.window).find('h1')[0])
  .text('Hello World')
  .parents('html')[0]
  .outerHTML;

めっちゃ格好悪いですが、これでもいけるはずですね。

Comments

[Fujiman]

これ、私もやってみたのですがやはり以下のエラーになります
Error: jQuery requires a window with a document

[spookybird]

https://stackoverflow.com/questions/21358015/error-jquery-requires-a-window-with-a-document
このへんですかね。