【javascript】html タグを含む文字列を加工したいときのメモ

html タグを含む文字列を渡されて、色々加工したいときのメモ

(2016/12/26:タイトルを修正)

例)

var text = 'あいうえお<br />かきくけこ<br /><a href="#">さしすせそ</a>たちつてとなにぬねの<b>はひふへほ</b>' ;

上記のような文字列があったとして、下記のようにすると文字とタグを分けれます。

var texts = text.split(/<[!-~\s]+>/) ;
// 返却値 → ["あいうえお", "かきくけこ", "さしすせそ", "たちつてとなにぬねの", "はひふへほ", ""]
var tags  = text.match(/<[!-~\s]+>/gi) ;
// 返却値 → ["<br />", "<br /><a href="#">", "</a>", "<b>", "</b>"]

texts → tags → texts …　という風に結合すると元の文字列になります。

texts の文字数だけ数えていくとタグを含まない文字数を数えていく、とか、そのあとタグを含んだ文字列を出力、とか。

また、

var text = '<div>あいうえお<br />かきくけこ<br /><a href="#">さしすせそ</a>たちつてとなにぬねの<b>はひふへほ</b></div>' ;
var texts = text.split(/<[!-~\s]+>/) ;
// 返却値 → ["", "あいうえお", "かきくけこ", "さしすせそ", "たちつてとなにぬねの", "はひふへほ", ""]
var tags  = text.match(/<[!-~\s]+>/gi) ;
// 返却値 → ["<div>", "<br />", "<br /><a href="#">", "</a>", "<b>", "</b></div>"]

先頭が html タグの場合でも texts → tags → texts …　という順番は変わらないです。

弱点としては、 html タグの中に日本語入るとあかん、ということですね。

var text = '入力：<input type="text" value="ほげげ" />' ;
var texts = text.split(/<[!-~\s]+>/) ;
// 返却値 → ["入力：<input type="text" value="ほげげ" />"]
var tags  = text.match(/<[!-~\s]+>/gi) ;
// 返却値 → null (タグ無し扱いになる)

何かいい方法無いかな。。。