7

javascript を使用して、指定された文字列から html タグを削除したいと考えています。現在のアプローチを調べましたが、未解決の問題がいくつかあります。

現在のソリューション

(1) JavaScript を使用して仮想 div タグを作成し、テキストを取得する

  function remove_tags(html)
  {
       var tmp = document.createElement("DIV");
       tmp.innerHTML = html; 
       return tmp.textContent||tmp.innerText; 
  }

(2) 正規表現の使用

  function remove_tags(html)
  {
       return html.replace(/<(?:.|\n)*?>/gm, '');
  }

(3) JQuery の使用

  function remove_tags(html)
  {
       return jQuery(html).text();
  }

これらの 3 つのソリューションは正しく機能していますが、文字列が次のようになっている場合

  <div> hello <hi all !> </div>

剥がれた紐はこんな感じ helloです。しかし、html タグのみを削除する必要があります。お気に入りhello <hi all !>

編集:背景は、特定のテキスト領域のすべてのユーザー入力 html タグを削除したいです。<hi all>しかし、ユーザーがある種のテキストを入力できるようにしたいと考えています。現在のアプローチでは、<> 内に含まれるすべてのコンテンツを削除します。

4

6 に答える 6

7

別のアプローチを検討する場合、正規表現の使用は問題にならない可能性があります。たとえば、すべてのタグを検索し、タグ名が定義済みの有効な HTML タグ名のリストと一致するかどうかを確認します。

var protos = document.body.constructor === window.HTMLBodyElement;
    validHTMLTags  =/^(?:a|abbr|acronym|address|applet|area|article|aside|audio|b|base|basefont|bdi|bdo|bgsound|big|blink|blockquote|body|br|button|canvas|caption|center|cite|code|col|colgroup|data|datalist|dd|del|details|dfn|dir|div|dl|dt|em|embed|fieldset|figcaption|figure|font|footer|form|frame|frameset|h1|h2|h3|h4|h5|h6|head|header|hgroup|hr|html|i|iframe|img|input|ins|isindex|kbd|keygen|label|legend|li|link|listing|main|map|mark|marquee|menu|menuitem|meta|meter|nav|nobr|noframes|noscript|object|ol|optgroup|option|output|p|param|plaintext|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|source|spacer|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video|wbr|xmp)$/i;

function sanitize(txt) {
    var // This regex normalises anything between quotes
        normaliseQuotes = /=(["'])(?=[^\1]*[<>])[^\1]*\1/g,
        normaliseFn = function ($0, q, sym) { 
            return $0.replace(/</g, '&lt;').replace(/>/g, '&gt;'); 
        },
        replaceInvalid = function ($0, tag, off, txt) {
            var 
                // Is it a valid tag?
                invalidTag = protos && 
                    document.createElement(tag) instanceof HTMLUnknownElement
                    || !validHTMLTags.test(tag),

                // Is the tag complete?
                isComplete = txt.slice(off+1).search(/^[^<]+>/) > -1;

            return invalidTag || !isComplete ? '&lt;' + tag : $0;
        };

    txt = txt.replace(normaliseQuotes, normaliseFn)
             .replace(/<(\w+)/g, replaceInvalid);

    var tmp = document.createElement("DIV");
    tmp.innerHTML = txt;

    return "textContent" in tmp ? tmp.textContent : tmp.innerHTML;
}

実際のデモ: http://jsfiddle.net/m9vZg/3/

これが機能するのは、一致する開始タグ「<」の一部でない場合、ブラウザーは「>」をテキストとして解析するためです。正規表現を使用して HTML タグを解析しようとする場合と同じ問題に悩まされることはありません。探しているのは開始区切り文字とタグ名だけであり、他のすべては無関係であるためです。

これは将来の証明でもあります。WebIDL 仕様はベンダーに HTML 要素のプロトタイプを実装する方法を指示しているため、現在一致するタグから HTML 要素を作成しようとしています。要素が のインスタンスである場合HTMLUnknownElement、有効な HTML タグではないことがわかります。validHTMLTags正規表現は、IE 6 や 7 など、これらのプロトタイプを実装していない古いブラウザー用の HTML タグのリストを定義します。

于 2013-06-18T10:01:45.323 に答える
5

無効なマークアップをそのままにしておきたい場合は、正規表現が最善の策です。このようなものがうまくいくかもしれません：

 text = html.replace(/<\/?(span|div|img|p...)\b[^<>]*>/g, "")

すべてのタグ(または削除したいタグのみ)(span|div|img|p...)のリストに展開します。注意: リストは長さでソートする必要があり、長いタグが先になります!

これは、一部の特殊なケース (文字を含む属性など) で誤った結果をもたらす可能性があります<>が、唯一の実際の代替手段は、完全な html パーサーを自分でプログラムすることです。非常に複雑になるわけではありませんが、ここではやり過ぎかもしれません。我々に教えてください。

于 2013-06-18T08:53:39.807 に答える
1 
var StrippedString = OriginalString.replace(/(<([^>]+)>)/ig,"");
于 2013-06-18T08:53:51.737 に答える
0

ここに私の解決策があります、

function removeTags(){
    var txt = document.getElementById('myString').value;
    var rex = /(<([^>]+)>)/ig;
    alert(txt.replace(rex , ""));

}
于 2014-01-24T13:06:21.930 に答える
0

テキストエリアで HTML タグを防止するために正規表現を使用しています

例

<form>
    <textarea class="box"></textarea>
    <button>Submit</button>
</form>
<script>
    $(".box").focusout( function(e) {
        var reg =/<(.|\n)*?>/g; 
        if (reg.test($('.box').val()) == true) {
            alert('HTML Tag are not allowed');
        }
        e.preventDefault();
    });
</script>
于 2017-08-21T11:49:26.203 に答える