4

javascript で html 文字列を取得し、正規表現を使用して、html タグの id、style、および class 属性を削除します。たとえば、次のようにします。

New York City.<div style="padding:20px" id="upp" class="upper"><div style="background:#F2F2F2; color:black; font-size:90%; padding:10px 10px; width:500px;">This message is.</div></div>

この文字列を次のようにしたい：

New York City.<div><div>This message is.</div></div>
4

8 に答える 8

10

正規表現を使用して HTML を解析するのは悪い考えですが、代わりに、すべてのブラウザで利用できる DOM 機能を利用できます。最初に DOM ツリーをたどることができる必要があります。

var walk_the_DOM = function walk(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walk(node, func);
        node = node.nextSibling;
    }
};

次に、文字列を解析して DOM を操作します。

var wrapper= document.createElement('div');
wrapper.innerHTML= '<!-- your HTML here -->';
walk_the_DOM(wrapper.firstChild, function(element) {
    if(element.removeAttribute) {
        element.removeAttribute('id');
        element.removeAttribute('style');
        element.removeAttribute('class');
    }
});
result = wrapper.innerHTML;

この JSFiddleも参照してください。

于 2012-09-10T22:57:29.697 に答える
2

div タグ名以外をすべて削除する場合は、

string=string.replace(/<(div)[^>]+>/ig,'<$1>');

<DIV>これは、html が大文字の場合に返されます。

于 2012-09-11T03:18:56.130 に答える
1

i used this

var html = 'New York City.<div style="padding:20px" id="upp"
class="upper"><div style="background:#F2F2F2; color:black; font-size:90%; padding:10px 10px; width:500px;">This message is.</div></div>';

function clear_attr(str,attrs){
    var reg2 = /\s*(\w+)=\"[^\"]+\"/gm;
    var reg = /<\s*(\w+).*?>/gm;
    str = str.replace(reg,function(match, i) {
        var r_ = match.replace(reg2,function(match_, i) {
            var reg2_ = /\s*(\w+)=\"[^\"]+\"/gm;
            var m = reg2_.exec(match_);
            if(m!=null){
                if(attrs.indexOf(m[1])>=0){
                    return match_;
                }
            }
            return '';
        });        
        return r_;
    });
    return str;
}
clear_attr(html,[]);
于 2015-09-15T01:36:34.300 に答える
1

属性を削除したいだけなら、正規表現は間違ったツールです。代わりに、次のことをお勧めします。

function stripAttributes(elem){
    if (!elem) {
        return false;
    }
    else {
        var attrs = elem.attributes;
        while (attrs.length) {
            elem.removeAttribute(attrs[0].name);
        }
    }
}

var div = document.getElementById('test');

stripAttributes(div);

<a href="http://jsfiddle.net/davidThomas/3fnzn/" rel="nofollow">JS Fiddle のデモ。

于 2012-09-11T07:14:35.130 に答える
0

正規表現を使用してHTMLを解析しようとすると、問題が発生します。この答えはそれらを説明するのに役立つかもしれません。jQueryを使用している場合は、次のようなことができる場合があります。

var transformedHtml = $(html).find("*").removeAttr("id").removeAttr("style").removeAttr("class").outerHTML()

これを機能させるには、ここで説明するouterHTMLプラグインを使用する必要があります。

jQueryを使用したくない場合は、注意が必要です。これらの質問には、文字列をDOM要素のコレクションに変換する方法に関して役立つ回答が含まれている場合があります。HTML文字列をDOM要素に変換しますか？、組み込みのDOMメソッドまたはプロトタイプを使用してHTML文字列から新しいDOM要素を作成します。組み込みのremoveAttr関数を使用して、要素をループし、属性を削除できる場合があります。私にはあなたのためにすべての詳細を理解する時間や動機がありません。

于 2012-09-10T22:28:02.763 に答える
0

単純なスクリプト ソリューションは次のようになります。

function removeProperties(markup) {
  var div = document.createElement('div');
  div.innerHTML = markup;
  var el, els = div.getElementsByTagName('*');

  for (var i=0, iLen=els.length; i<iLen; i++) {
    el = els[i];
    el.id = '';
    el.style = '';
    el.className = '';
  }
  // now add elements to the DOM
  while (div.firstChild) {
   // someElement.appendChild(div.firstChild);
  }
}

より一般的な解決策は、プロパティ名を追加の引数として取得するか、スペースで区切られた文字列と言ってから、名前を繰り返し処理してそれらを削除します。

于 2012-09-10T22:47:26.507 に答える