1

HTML タグを変更して、タグの後のクラス/スタイル属性を削除しようとしています。事前にコードを作成して置き換える場合、これを行う方法は既に知っています。今は、既に読み込まれたページでタグを見つけて、それらを js に置き換える方法を知りたいと思っています。

var s = "<h2 class=\"title\" style=\"font-color: red;\">Blog Post</h2>";
s = s.replace("<h2 class=\"title\" style=\"font-color: red;\">","<p>");
s = s.replace(/<\/h2>/g, "</p>");

皮切りに <h2 class="title" style="font-color: red;">Blog Post</h2>

で終わる <p>Blog Post</p>

問題はvar s、既存の HTMLを使用して を作成するにはどうすればよいかということです。h2.titleページで見つけて に渡すにはどうすればよいvar sですか?

編集私が見つけて微調整したこのスクリプトを除いて、JavaScriptの経験はありません。既存のドキュメントからテキストを取得する方法を説明し、それを s.replace の変数にして操作できるようにします。

4

2 に答える 2

2

正規表現を使用しないでください。DOM 操作を使用して、問題のテキスト ノードpを作成したタグに移動する必要があります。必要なことを実行するコードを次に示します。

http://jsfiddle.net/jWRh5/

// Find the h2
var h2 = document.querySelector("h2");
// Create the p element you need
var p = document.createElement("p");
// Move the text node into the p element
p.appendChild(h2.firstChild);
// Insert the p element before the h2
h2.parentNode.insertBefore(p, h2);
// Get rid of the h2
h2.parentNode.removeChild(h2);

他のすべての人が提案することに反対したい場合は、RegExpを使用して必要なものを達成する方法を次に示しますhttp://jsfiddle.net/jWRh5/1/

十分にサポートされていない機能を使用していますouterHTML(主要なブラウザーの最新バージョンで動作します)。

var h2 = document.querySelector("h2.title");
var s = h2.outerHTML;
s = s.replace("<h2 class=\"title\" style=\"font-color: red;\">","<p>");
s = s.replace(/<\/h2>/g, "</p>");
h2.outerHTML = s;

ページ上のすべての h2.titles に対してこれを行う方法は次のとおりです (RegExp の方法は非常に貧弱な方法であるため使用しませんが、実際に使用する場合は、ガイドとして使用できます)。

var h2s = document.querySelectorAll("h2.title");
// Loop backwards since we're modifying the list
for (var i = h2s.length -1 ; i >=0; i--) {
    var h2 = h2s[i];
    var p = document.createElement("p");
    p.appendChild(h2.firstChild);
    h2.parentNode.insertBefore(p, h2);
    h2.parentNode.removeChild(h2);
}
于 2012-11-28T00:50:42.090 に答える
1

この種のことに対して、jQueryは実に手っ取り早く利益をもたらします。

あなたが望むことをするためのコードは次のとおりです：

$("h2").replaceWith ( function () {
    return '<p>' + this.textContent + '</p>';
} );


または、より具体的にしたい場合：

$("h2.title").replaceWith ( function () {
    return '<p>' + this.textContent + '</p>';
} );


そのコードはすべての<h2>要素 (最初のブロック)、または<h2>クラスを持つすべての要素のみ (2 番目のブロック) を修正することに 注意してくださいtitle。

ユーザー スクリプトに jQuery を含める方法については、クロスブラウザー アプローチに関するこの回答を参照してください。

.replaceWith()関数に関するドキュメント。

于 2012-11-28T01:34:11.187 に答える