2

次のようなHTML文字列があるとします。

<div id="loco" class="hey" >lorem ipsum pendus <em>hey</em>moder <hr /></div>

そして<br/>、すべてのスペース文字の後に要素を配置する必要があります....私がやっていたこと：

HTMLtext.replace(/\s{1,}/g, ' <br/>');

ただし、問題は、タグ間（タグプロパティ間）のスペース文字の後にブレークが挿入されることです。もちろん、タグのテキストコンテンツに対してのみこれを実行したいと思います。どういうわけか、私はいつも正規表現が本当に苦手でした-誰か助けてもらえますか？

したがって、基本的に元の空白は一致しますが、<と>の間にない場合に限りますか？

4

3 に答える 3

4

正規表現はこのための良いツールではありません。生のHTML文字列ではなく、DOMを使用する必要があります。

タグを区切るものを除いて、文字列に文字がない、 <または文字がないことを前提とする手っ取り早い解決策については、これを試すことができます。>

result = subject.replace(/\s+(?=[^<>]*<)/g, "$&<br/>");

<br/>これにより、次の山かっこが開き山かっこである場合にのみ、後に空白が挿入されます。

説明：

\s+     # Match one or more whitespace characters (including newlines!)
(?=     # but only if (positive lookahead assertion) it's possible to match...
 [^<>]* #  any number of non-angle brackets
 <      #  followed by an opening angle bracket
)       # ...from this position in the string onwards.

$&これを（一致した文字を含む）プラスに置き換え<br/>ます。

この正規表現は、>さらに遅れているかどうかをチェックしません。これには、ポジティブルック*ビハインド*アサーションが必要であり、JavaScriptはこれらをサポートしていません。したがって、それを確認することはできませんが、HTMLを制御し、上記の条件が満たされていることを確認できれば、問題はありません。

于 2012-10-04T15:23:58.827 に答える
2

domを繰り返し、空白を要素に置き換えるには、この回答を参照してください。<br />適合したコードは次のようになります。

(function iterate_node(node) {
    if (node.nodeType === 3) { // Node.TEXT_NODE
        var text = node.data,
            words = text.split(/\s/);
        if (words.length > 1) {
            node.data = words[0];
            var next = node.nextSibling,
                parent = node.parentNode;
            for (var i=1; i<words.length; i++) {
                var tnode = document.createTextNode(words[i]),
                    br = document.createElement("br");
                parent.insertBefore(br, next);
                parent.insertBefore(tnode, next);
            }
        }
    } else if (node.nodeType === 1) { // Node.ELEMENT_NODE
        for (var i=node.childNodes.length-1; i>=0; i--) {
            iterate_node(node.childNodes[i]); // run recursive on DOM
        }
    }
})(content); // any dom node

（jsfiddle.netでのデモ）

于 2012-10-04T15:39:21.053 に答える
0

さて、HTMLタグ内のスペースを一致させたくありません。これには正規表現だけでは不十分です。レクサーを使用して作業を行います。ここで出力を確認できます。

var lexer = new Lexer;

var result = "";

lexer.addRule(/</, function (c) { // start of a tag
    this.state = 2; // go to state 2 - exclusive tag state
    result += c; // copy to output
});

lexer.addRule(/>/, function (c) { // end of a tag
    this.state = 0; // go back to state 0 - initial state
    result += c; // copy to output
}, [2]); // only apply this rule when in state 2

lexer.addRule(/.|\n/, function (c) { // match any character
    result += c; // copy to output
}, [2]); // only apply this rule when in state 2

lexer.addRule(/\s+/, function () { // match one or more spaces
    result += "<br/>"; // replace with "<br/>"
});

lexer.addRule(/.|\n/, function (c) { // match any character
    result += c; // copy to output
}); // everything else

lexer.input = '<div id="loco" class="hey" >lorem ipsum pendus <em>hey</em>moder <hr /></div>';

lexer.lex();

もちろん、レクサーは非常に強力なツールです。タグ内の属性の値内の山かっこをスキップすることもできます。ただし、実装はお任せします。幸運を。

于 2012-10-04T15:50:03.183 に答える