javascriptの正規表現で、特定のパターンの時に文字を追加する方法を教えて下さい。


やりたい事
<font>123<font>456</font>789</font> のデータを
<font><span>123</span><font><span>456</span></font><span>789</span></font>
に置き換えたい。

置き換えは2ステップで実施したい。
1step目
<font>123<font>456</font>789</font> を配列に置き換える。
a[0]=<font>
a[1]=123
a[2]=<font>
a[3]=456
a[4]=</font>
a[5]=789
a[6]=</font>
の様にsplitしたい。
2step目は・・・forで処理できるので私でも作れると思います。

どうかよろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/08/26 13:59:38
  • 終了:2012/09/02 14:00:06

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4365ベストアンサー獲得回数18012012/08/30 23:42:54

ポイント100pt

入れ子の構造になった状態の HTML から、特定の属性を拾って、平らな構造の SPAN でくくった表現に変換するコードを書いてみました。

function extract_content(e, a) {
    var ee = e.firstChild
    do {
        if (ee.nodeType == 3) {
            var s = window.getComputedStyle(ee.parentNode)
            a.push({text: ee.textContent, font: s.fontSize, color: s.color})
        }
        if (ee.nodeType == 1) {
            extract_content(ee, a)
        }
    } while (ee = ee.nextSibling)
}
function change_flat_expression() {
    var source = document.getElementById("source")
    var list = []
    extract_content(source, list)
    var target = document.getElementById("result")
    for (var i = 0 ; i < list.length ; ++i) {
        var ee = document.createElement("SPAN")
        ee.style.color = list[i].color;
        ee.style.fontSize = list[i].font;
        ee.innerHTML = list[i].text
        target.appendChild(ee)
    }
    var s = target.innerHTML
    target = document.getElementById("result2")
    target.textContent = s
}

関数 change_flat_expression は、id="source" の要素配下の HTML から font-size と color の属性を拾って、入れ子の構造がない SPAN でくくった表現に変換します。

jsFiddle で試してみたのがこれです。
http://jsfiddle.net/ATYFq/

<font style="color: red;">
あああ
    <font class="C2">
    いいい
        <font style="font-size: large; color: green;">
        ううう
        </font>
        <font style="font-size: medium;">
        えええ
        </font>
    おおお
    </font>
</font>

という表記を、以下のように変換します(SPAN 単位の改行は手で入れてます)。

<span style="color: rgb(0, 0, 0); font-size: 12px;"> </span>
<span style="color: rgb(255, 0, 0); font-size: 12px;"> あああ </span>
<span style="color: rgb(0, 0, 255); font-size: 10px;"> いいい </span>
<span style="color: rgb(0, 128, 0); font-size: 14px;"> ううう </span>
<span style="color: rgb(0, 0, 255); font-size: 10px;"> </span>
<span style="color: rgb(0, 0, 255); font-size: 12px;"> えええ </span>
<span style="color: rgb(0, 0, 255); font-size: 10px;"> おおお </span>
<span style="color: rgb(255, 0, 0); font-size: 12px;"> </span>
<span style="color: rgb(0, 0, 0); font-size: 12px;"> </span>

見た目が同じになるのは、jsFiddle のコード を動かしてみれば分かると思います。
やりたいのは、こういうことではないでしょうか?

id:kameoyaji_2

やりたいことドンピシャです。
ありがとうございます。

2012/09/06 16:41:11

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922012/08/26 14:12:57

ポイント100pt
var src = '<font>123<font>456</font>789</font>';
var new_src = src.replace(/(\d+)/gi, '<span>$1</span>');
console.log(new_src)
console.log(new_src == '<font><span>123</span><font><span>456</span></font><span>789</span></font>'); //true

これでできます。配列にするパターンも必要ですか?

他10件のコメントを見る
id:kameoyaji_2

入れこのフォントは・・・・。
他のシステムから、HTMLは作られてきている物で、入れこのFONTを止めて・・とは言えないです。

文字列の加工を行った後は、DOMのいinnerHTMLにHTMLの文字列を渡して、nodeを再帰的に辿って処理をする予定でいます。

fontの入れ子(タグの入れ子でもありますが)が無ければ、何もしなくてもよいのですが、fontが入れ子になっているために、一番最初に記載させていただように、 実際に表示すべき textの部分を、タグでくくってからdomでパースさせたいと考えています。

そうしないと、nodeツリーをたどって、子ノードが無い(#text等は有ってもタグが存在しない)ノードで#textを入手し連結して表示されるテキスト文字を構成することが出来ないもので。

最終的に行いたいのは、入れ子のFONTタグをなくして、入れ子なしでSPANで作成する+同時に色を調整する。
というのが最終的な作りたい動きです。

2012/08/27 17:46:42
id:Cherenkov

「最終的に行いたいのは、入れ子のFONTタグをなくして、入れ子なしでSPANで作成する+同時に色を調整する」
そのサンプルを提示したほうが、話が早いと思うのですが。

2012/08/28 10:23:38
id:a-kuma3 No.2

a-kuma3回答回数4365ベストアンサー獲得回数18012012/08/30 23:42:54ここでベストアンサー

ポイント100pt

入れ子の構造になった状態の HTML から、特定の属性を拾って、平らな構造の SPAN でくくった表現に変換するコードを書いてみました。

function extract_content(e, a) {
    var ee = e.firstChild
    do {
        if (ee.nodeType == 3) {
            var s = window.getComputedStyle(ee.parentNode)
            a.push({text: ee.textContent, font: s.fontSize, color: s.color})
        }
        if (ee.nodeType == 1) {
            extract_content(ee, a)
        }
    } while (ee = ee.nextSibling)
}
function change_flat_expression() {
    var source = document.getElementById("source")
    var list = []
    extract_content(source, list)
    var target = document.getElementById("result")
    for (var i = 0 ; i < list.length ; ++i) {
        var ee = document.createElement("SPAN")
        ee.style.color = list[i].color;
        ee.style.fontSize = list[i].font;
        ee.innerHTML = list[i].text
        target.appendChild(ee)
    }
    var s = target.innerHTML
    target = document.getElementById("result2")
    target.textContent = s
}

関数 change_flat_expression は、id="source" の要素配下の HTML から font-size と color の属性を拾って、入れ子の構造がない SPAN でくくった表現に変換します。

jsFiddle で試してみたのがこれです。
http://jsfiddle.net/ATYFq/

<font style="color: red;">
あああ
    <font class="C2">
    いいい
        <font style="font-size: large; color: green;">
        ううう
        </font>
        <font style="font-size: medium;">
        えええ
        </font>
    おおお
    </font>
</font>

という表記を、以下のように変換します(SPAN 単位の改行は手で入れてます)。

<span style="color: rgb(0, 0, 0); font-size: 12px;"> </span>
<span style="color: rgb(255, 0, 0); font-size: 12px;"> あああ </span>
<span style="color: rgb(0, 0, 255); font-size: 10px;"> いいい </span>
<span style="color: rgb(0, 128, 0); font-size: 14px;"> ううう </span>
<span style="color: rgb(0, 0, 255); font-size: 10px;"> </span>
<span style="color: rgb(0, 0, 255); font-size: 12px;"> えええ </span>
<span style="color: rgb(0, 0, 255); font-size: 10px;"> おおお </span>
<span style="color: rgb(255, 0, 0); font-size: 12px;"> </span>
<span style="color: rgb(0, 0, 0); font-size: 12px;"> </span>

見た目が同じになるのは、jsFiddle のコード を動かしてみれば分かると思います。
やりたいのは、こういうことではないでしょうか?

id:kameoyaji_2

やりたいことドンピシャです。
ありがとうございます。

2012/09/06 16:41:11

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません