HTMLタグを除去したいけど特定のタグは残したい事情があったので作りました。もとい、ググり倒しました。
需要はないかもしれませんが備忘録がてら残します。
サンプルのスクリプトが雑ですが、色々なページでコンソールに打ち込めばいい親切設計です...(震
removeTag.js
/**
* HTMLタグを文字列から除去する
* 第二引数にHTMLタグを指定した場合、指定されたHTMLタグは除去されずに残る
*
* @param {string} str 処理対象の文字列
* @param {string|Array} arrowTag 許容するHTMLタグ名。配列形式で複数指定可能。
* @return {string} タグが除去された文字列
*/
function removeTag(str, arrowTag) {
// 配列形式の場合は'|'で結合
if ((Array.isArray ?
Array.isArray(arrowTag)
: Object.prototype.toString.call(arrowTag) === '[object Array]')
) {
arrowTag = arrowTag.join('|');
}
// arrowTag が空の場合は全てのHTMLタグを除去する
arrowTag = arrowTag ? arrowTag : '';
// パターンを動的に生成
var pattern = new RegExp('(?!<\\/?(' + arrowTag + ')(>|\\s[^>]*>))<("[^"]*"|\\\'[^\\\']*\\\'|[^\\\'">])*>', 'gim');
return str.replace(pattern, '');
}
// Alias
var log = function (arg) { console.log(arg); };
// ページ全体のHTMLを取得
var htmlString = document.documentElement.outerHTML || document.documentElement.innerHTML;
// 全てのHTMLタグを除去
log(removeTag(htmlString));
// a タグのみ許容
log(removeTag(htmlString, 'a'));
// a タグ、 span タグを許容
log(removeTag(htmlString, ['a', 'span']));
// 閉じタグが無いタイプのタグもOK(inputなど)
log(removeTag(htmlString, 'input'));
##注釈について
- 古いブラウザ向けの対応を兼ねているので、配列の判定にやたら読みづらい事になってます。詳しくは下記ページにて。
Array.isArray - JavaScript | MDN
##正規表現の説明
助けてドラえm(ry
-
(?!<\\\/?(' + arrowTag + ')(>|\\\s[^>]*>))
は別に驚いてるわけじゃありません。否定先読みというものらしいです。
(?!pattern)
の場合、pattern
をマッチングから除外するものです。
※正規表現 - JavaScript | MDNの「否定先読み」の解説部分 -
<("[^"]*"|\\\'[^\\\']*\\\'|[^\\\'">])*>
は「JavaScriptでHTMLタグを削除する正規表現 - Qiita(@miiitaka様)」でも紹介されているHTMLタグを除外する定番の正規表現です(多分)。
今回はこれに特定のタグをマッチさせないように正規表現を追加したものです。
また、文字列から正規表現のオブジェクトを生成しているのでエスケープがうっじゃうっじゃしています。あとで見て自分で混乱しないよう、おまけ程度に補足。
'\\/'
は、文字列としては '\/'
になります。
'\\\''
は、文字列としては '\''
になります。
##最後に
正規表現はいつ見ても暗号にしか見えません...。
上の正規表現も無駄やミスがあるかもしれないので、変な挙動があったら教えていただけると、それはとってもうれしいなって。
以上です。ここまでお読みいただきありがとうございました!
##参考
JavaScriptでHTMLタグを削除する正規表現 - Qiita(@miiitaka様)
Array.isArray - JavaScript | MDN
正規表現 - JavaScript | MDN