LoginSignup
48
44

More than 5 years have passed since last update.

正規表現で特定のタグ以外のHTMLタグを除去する

Last updated at Posted at 2014-07-18

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'));

注釈について

  1. 古いブラウザ向けの対応を兼ねているので、配列の判定にやたら読みづらい事になってます。詳しくは下記ページにて。
    Array.isArray - JavaScript | MDN

正規表現の説明

助けてドラえm(ry

  1. (?!<\\\/?(' + arrowTag + ')(>|\\\s[^>]*>)) は別に驚いてるわけじゃありません。否定先読みというものらしいです。
    (?!pattern)の場合、patternをマッチングから除外するものです。
    正規表現 - JavaScript | MDNの「否定先読み」の解説部分
  2. <("[^"]*"|\\\'[^\\\']*\\\'|[^\\\'">])*>は「JavaScriptでHTMLタグを削除する正規表現 - Qiita@miiitaka様)」でも紹介されているHTMLタグを除外する定番の正規表現です(多分)。
    今回はこれに特定のタグをマッチさせないように正規表現を追加したものです。

また、文字列から正規表現のオブジェクトを生成しているのでエスケープがうっじゃうっじゃしています。あとで見て自分で混乱しないよう、おまけ程度に補足。
'\\/' は、文字列としては '\/' になります。
'\\\'' は、文字列としては '\'' になります。

最後に

正規表現はいつ見ても暗号にしか見えません...。
上の正規表現も無駄やミスがあるかもしれないので、変な挙動があったら教えていただけると、それはとってもうれしいなって。

以上です。ここまでお読みいただきありがとうございました!

参考

JavaScriptでHTMLタグを削除する正規表現 - Qiita@miiitaka様)
Array.isArray - JavaScript | MDN
正規表現 - JavaScript | MDN

48
44
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
48
44