HOME

{ テキスト内指定文字列へ CSS クラス名一括指定ツール }

{ svg, javascript で作成したプログラム一覧 }

推奨 ブラウザ : chrome

CSSのクラス名を利用して色をつけるテキスト : テキストの貼り付け

CSSのクラス名を指定する 文字列群 : CSV データの貼り付け

正規表現のオプション "g" を指定していない場合でも、文字列に一回マッチすると "g" として書き出してしまいます。
* 正規表現を用いて CSS のクラス名を指定する場合は、クラス名を タグ記号で囲んでください。
<クラス名>
マッチした文字列の中にある改行は、 <br> として書き出します。

:

HTML テキスト ダグ出力 : 取得

HTML 要素へ出力 : 確認

CSV データを利用して、テキスト内の指定文字列に CSS クラス名を一括指定する javascript で作成したツールです。
テキスト内に繰り返し現れる文字列を CSS のクラス名を付けた HTML タグと置き換えます。
CSV データの一行目がクラス名、一列目が、このクラス名をつける文字列になります。
後は、その繰り返しになります。
一番上のテキストエリアに CSS のクラス名配置するテキストを貼り付けます。
二番目が CSV データになります。[ CSV はカンマ区切り ]
CSV データ : 例
c0, c1, c2 //一行目 CSS クラス名 aa, 0, あ bb, 1, い cc, 2, う 上記の CSV データでは、以下のようなタグが作成されます。
<span class='c0'>aa</span>
<span class='c0'>bb</span>
<span class='c0'>cc</span>

<span class='c1'>0</span>
<span class='c1'>1</span>
<span class='c1'>2</span>

<span class='c2'>あ</span>
<span class='c2'>い</span>
<span class='c2'>う</span>

CSS クラスの書き出しは、行、列の番号が浅い方、
文字数の大きいものが優先してクラス付されます。

CSS のクラス名を付けた HTML タグは、3番目のテキストエリアに出力されます。
四番目のエリアは、クラス名が反映されているかの確認用です。

select 要素では、[ 改行の記号を検出 ] を選ぶことが出来ます。
貼り付けた テキストに改行記号が含まれる場合、 p 又は br 要素に置き換えます。
その次の select 要素では、出力する HTML テキストを インデントで整形して表示することも出来ます。
この数値を 0 以外に設定して、取得した HTML テキスト を要素に書き出すと、
文字と文字の間にスペースが出来てしまい、元のテキストのデータを壊してしまいます。
これは、テキストを span 要素で囲んでしまうことに原因があるようです。
なので、 0 以外の数値は、タグの確認用です。

2017-05-21 : 正規表現でも文字列が検索できるようにしました。
CSS のクラス名をした文字列のなかにある、改行は <br> に変換されます。
正規表現を用いて、CSS クラス名の設定を行う場合は、
クラス名をタグ記号 < CSS クラス名> で囲んでください。
重い処理が更に重たくなりました。

処理するデータのサイズに制限はしていないのですが、
pc に高負荷が。。。(*'ω' *)

数学の勉強をやり直ししてたりします。_´ω`)_