[解決済み] JavaScriptやjQueryでHTMLを正規化する方法とは?
2023-06-15 20:43:50
質問
タグは複数の属性を持つことができます。属性がコードに現れる順序は重要ではありません。例えば
<a href="#" title="#">
<a title="#" href="#">
JavascriptでHTMLを正規化し、属性の順序を常に同じにするにはどうしたらよいでしょうか。私は、常に同じである限り、どの順序が選ばれても気にしません。
UPDATE 私の当初の目的は、わずかな違いのある2つのHTMLページの差分を(JavaScriptで)簡単に作成することでした。ユーザーはコードを編集するために異なるソフトウェアを使用することができるので、属性の順序が変わる可能性があります。これでは、diffが冗長になりすぎます。
ANSWER : さて、まずすべての回答に感謝します。そして、はい、それは可能です。以下は、私がそれを行うことができた方法です。これはコンセプトの証明であり、確かに最適化することができます。
function sort_attributes(a, b) {
if( a.name == b.name) {
return 0;
}
return (a.name < b.name) ? -1 : 1;
}
$("#original").find('*').each(function() {
if (this.attributes.length > 1) {
var attributes = this.attributes;
var list = [];
for(var i =0; i < attributes.length; i++) {
list.push(attributes[i]);
}
list.sort(sort_attributes);
for(var i = 0; i < list.length; i++) {
this.removeAttribute(list[i].name, list[i].value);
}
for(var i = 0; i < list.length; i++) {
this.setAttribute(list[i].name, list[i].value);
}
}
});
diffの2番目の要素も同じです。
$('#different')
. では
$('#original').html()
と
$('#different').html()
は、同じ順序で属性を持つHTMLコードを表示します。
どのように解決するのですか?
これは概念的なものであり、最適化することが可能です。
function sort_attributes(a, b) {
if( a.name == b.name) {
return 0;
}
return (a.name < b.name) ? -1 : 1;
}
$("#original").find('*').each(function() {
if (this.attributes.length > 1) {
var attributes = this.attributes;
var list = [];
for(var i =0; i < attributes.length; i++) {
list.push(attributes[i]);
}
list.sort(sort_attributes);
for(var i = 0; i < list.length; i++) {
this.removeAttribute(list[i].name, list[i].value);
}
for(var i = 0; i < list.length; i++) {
this.setAttribute(list[i].name, list[i].value);
}
}
});
diffの2番目の要素である$('#different')でも同じことが言えます。これで $('#original').html() と $('#different').html() は同じ順序で属性を持つ HTML コードを表示するようになりました。
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] JavaScriptの文字列プリミティブとStringオブジェクトの違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] querySelectorAllがない場合、ライブラリを使用せずに属性で要素を取得する?
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる