二つのHTMLを比較し、『異なる部分を置換』する方法

Question

前提・実現したいこと

jQueryの質問になります。

二つのHTMLを比較し、『異なる部分を置換』する方法を知りたいです。

該当のソースコード

次のソースコードは、iniObjからHTMLを生成し、ボタンクリックでnewObjのHTMLへと『すべてを置換』しますが、これを『異なる部分を置換』という風にしたいのです。

『異なる部分を置換』というのは『iniObjとnewObjの値を比較して、HTMLの異なる部分を置換』という意味で、たとえば『user_idが異なればHTMLのその部分だけを置換し、titleが異なれば以下同文』です。

<button type="button">ボタン</button>
<div class="box">
  <!--
  読み込み時
  → iniObjから生成されたHTMLが入ります
  ボタンクリック時
  → iniObjとnewObjの値を比較して、HTMLの異なる部分を置換します
  -->
</div>

// 読み込み時
const iniObj = {user_id:1,user_name:'鈴木',title:'今日の天気'};
const html = getHtml(iniObj);
$('.box').html(html);

// HTML生成
function getHtml(obj){
	const
	user_id = obj.user_id,
	user_name = obj.user_name,
	title = obj.title;
	return `
	<div>
		<p class="userdata user_id">${user_id}</p>
		<p class="user_name">${user_name}</p>
		<p class="post_title">${title}</p>
	</div>`;
}

// ボタンクリック時
$('button').click(function(){
	const newObj = {user_id:2,user_name:'山田',title:'今日の天気'};
	const html = getHtml(newObj);
	$('.box').html(html);
});

試したこと

次の流れで考えています。

躓いているのは「一致しない文字列のクラスを取得」の部分です。

あと'userdata user_id'のように複数クラスがある場合の置換もできません。（findメソッドが単一クラスにしか対応していないため？）

// ボタンクリック時
$('button').click(function(){
	// 2つのHTMLを取得する
	const iniHtml = getHtml(iniObj);
	const newObj = {user_id:2,user_name:'山田',title:'今日の天気'};
	const newHtml = getHtml(newObj);

	// 一致しない文字列のクラスを取得
	let classNames = ['userdata user_id','user_name'];
	
	// そのクラスだけを置換する
	classNames.forEach(function(className){
		const html = $(newHtml).find('.'+className);
		$('.box').find('.'+className).html(html);
	});
});

補足情報（FW/ツールのバージョンなど）

あくまで『異なる部分を置換』であって、『すべてを置換』ではないというのが難しいところです。
jQueryは3.4.1です。
良いお考えがございましたらご回答宜しくお願い致します。

Comments

[y_waiwai]

> 異なる要素だけを置換

したら、すべての要素が同一、と言うことになるわけですが、
単純にコピーしてしまうのとどういう違いがあるんでしょうか

[musume8]

> したら、すべての要素が同一、と言うことになるわけですが、
おしゃる通りです。

> 単純にコピーしてしまうのとどういう違いがあるんでしょうか
「単純にコピーしてしまう」というのは、「ただ置換するだけ（該当のソースコードの方法）」という意味ですよね？
で「ただ置換するだけ」ですと、画像を置換したときに読み込みが発生しますし、まぁ諸事情ということでそこは突っ込まないでくださいまし。

[A_kirisaki]

> 異なる要素だけを置換
それをやってるのが React やで

[musume8]

なるほど、Reactという言葉はなんとなく聞いたことがある程度でまだ使いこなせなそうです。

[Lhankor_Mhy]

『異なる要素だけを置換する』とのことですが、一方で『user_idが異なればそれだけを置換し、titleが異なればそれだけを置換』とも書かれています。ここで言うuser_idなどは変数のことかと思いますが、これは要素ではないと思います。
ご想定されていることは本当に『異なる要素だけを置換する』なのか、今一度整理していただけませんか？

[musume8]

たしかに、『user_idが異なればその要素だけを置換し、…』と書くべきでしたね。わかりにくい文章で申し訳ございません。

[Lhankor_Mhy]

いえ、そういう指摘ではありません。
「user_idが異なれば」とありますが、user_idに要素が入っているわけではないので、要素を比較しているわけではないと思います。「異なる要素」と言いながら実際には文字列を比較している、という指摘です。

つまり、一言で言うと「異なる要素」の定義をご提示ください、ということです。何が同じなら同じ要素とみなして、何が違うなら異なる要素とみなすのか、お示しください。

[musume8]

なるほど失礼致しました。「異なる要素」という表現が誤解を招いていたのだと思います。「異なる部分」とし、質問文を編集致しましたのでご査収いただけましたら幸いです。

[Lhankor_Mhy]

すみません、言葉ではなくて仕様の話なのですが……
あまりしつこくするのも失礼だと思いますので、ご提示のコードから読み解くようにします。
ありがとございました。

Answer 1

ご提示のコードを拝見する限り、『異なる部分を置換』とはclass属性が一致する要素を差し替える、ということかと思いました。

以下のようにしてはいかがでしょうか？

    classNames.forEach(function(className){
        const html = $(newHtml).find('[class="'+className+'"]');
        $('.box').find('[class="'+className+'"]').html(html);
    });

コメントを受けて追記

一致しない文字列のクラスを取得

これでいかがでしょうか。

Array.from($('p', iniHtml)).flatMap(e => 
    $(`[class="${e.getAttribute('class')}"]`, newHtml)[0].textContent !== e.textContent
    ? e.getAttribute('class')
    : []
);

Comments

[musume8]

ありがとうございます。データ属性と同じノリでクラスもそのように指定できたとは知りませんでした。
あとは「一致しない文字列のクラスを取得」ですが、そこは何かイメージございますか？

[Lhankor_Mhy]

ご提示のコードからは、「一致しない文字列のクラスを取得」の仕様が読み取れませんでした。

たとえば、
<p class="userdata user_id">今日の天気</p>
<p class="user_name">今日の天気</p>
<p class="post_title">今日の天気</p>
で、
{user_id:2,user_name:'山田',title:'今日の天気'}
だった場合、差し替えない要素はどれですか？

[musume8]

申し訳ございません。そちらのたとえはつまり

const iniObj = {user_id:'今日の天気',user_name:'今日の天気',title:'今日の天気'};

によって

<p class="userdata user_id">今日の天気</p>
<p class="user_name">今日の天気</p>
<p class="post_title">今日の天気</p>

が生成されていて

const newObj = {user_id:2,user_name:'山田',title:'今日の天気'}

が与えられるという状況ですね。
であればボタンクリックで以下に変更したいです。

<p class="userdata user_id">2</p>
<p class="user_name">山田</p>
<p class="post_title">今日の天気</p>

異なる部分だけが変わった。というのはこのような機能を考えています。

[Lhankor_Mhy]

<p class="post_title">今日の天気</p>
を差し替えないということですね。

これは、どういうルールによるものですか？ .post_title と newObj.title が対応している、というのは何を参照すれば分かりますか？

[Lhankor_Mhy]

もしかして、iniHtml と newHtml を比較して、class属性が完全一致する要素の文字列を比較し、その文字列が完全一致する場合は置換しない、ということでしょうか？

[musume8]

仰る通りです！その表現に至らずここまで大変な苦労をさせてしまい申し訳ございません。

[Lhankor_Mhy]

追記しました。

[musume8]

追記して頂きまして誠にありがとうございます。時間をかけて精読し、使いこなせるように頑張ります。

[musume8]

やっとコードが理解できました！本当にありがとうございました。
最終コード（https://jsfiddle.net/L47e0gct/）

Answer 2

どうしても「一致しない文字列のクラス」を取得したいようなので以下ではどうでしょう。
かなり無駄な処理が入っていますが、getHtml()関数は入力によって定型的に値を返すだけなので本題はobj側の差異を見つけることでしょう。

// 2つのHTMLを取得する
const iniHtml = getHtml(iniObj);
const newObj = {user_id:2,user_name:'鈴木',title:'今日の天気',test:"test"};
const newHtml = getHtml(newObj);

// 一致しない文字列の配列
let classNames = [];

// 一致しない文字列のクラスを取得
Object.keys(newObj).forEach(function(i){
	if(iniObj[i]){
		if(newObj[i] == iniObj[i]){
			classNames.push(i);
		}
	}else{
		classNames.push(i);
	}
});

// そのクラスだけを置換する
classNames.forEach(function(className){
	const html = $(newHtml).find('.'+className);
	$('.box').find('.'+className).html(html);
});

Comments

[musume8]

ありがとうございます。そちらclassNamesにクラス名でなくオブジェクトのキーが入ってしまいます。しかしHTML側にそのキーがクラス名として付与されていないので（そしてgetHtml()関数は変えたくないので）、実現できないです…

Answer 3

一致しないセレクタを探すのに要素を回すわけですから、予め一致しないセレクタのオブジェクトを用意するのは無駄ではないでしょうか？

forEachで回すならif文で差異が発見できるかどうかclassName毎に条件分岐すれば実装できると思います。

また、htmlメソッドで上書きするだけでなくvalメソッドやtextメソッドで変更を加える部位を最小限にすることもバグの減る実装方法なので一考してみてください。

Comments

[musume8]

なるほど。ありがとうございます。