0

わかりました、私はdomパターンを見つけようとしています:

 <div>
    <br>
    </div>

contenteditable div通常、次のように見えるmy から、複数のspans:

<div id="edit" contenteditable="true">
    <span>text</span>   
    <span>text</span> 
    //and more spans maybe 
     <div>
        <br>
     </div>
</div>

私が使用しているコード行は次のとおりです。

return string.split(/\r\n?|\n|<div>(.*?)<br>(.*?)<\/div>,gis/);

問題は、正規表現のこの部分<div>(.*?)<br>(.*?)<\/div>,gisです..パターンが存在しても、決して一致しません。わかりやすくするために、 はreturn、 my の入力変更イベントによってトリガーされ、入力テキスト全体にわたってループで実行されますcontenteditable div。パターンがある場所ごとに区切られたテキストの配列バージョンが必要です。このためのライブラリはありません。

4

4 に答える 4

1

これは、外部ライブラリを含まず、理解しやすいソリューションです。

editまず、 div のコンテンツを取得しましょう

var $edit = document.getElementById("edit")

次に、DOM を反復処理する小さな関数を作成します。これを行う方法はたくさんあります。Douglas Crockford が著書「JavaScript : The Good Parts」iirc で行った方法を次に示します。

function walkTheDOM(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walkTheDOM(node, func);
        node = node.nextSibling;
    }
}

この関数は、dom 内のすべての要素を通過し、その上でnode実行funcされます。

残っている唯一のことは$edit、前から div でそれを呼び出すことです。

walkTheDOM($edit, function (node) {
    if (node.nodeName.toLowerCase()==="div") { // we got a div
        if(node.innerHTML.trim() === "<br>"){ //whose inner html is <br>
           console.log("GOT",node);//print its name
        }
    }
});

これがすべての機能のフィドルです

検索のすべての作業が完了したら、残りのデータから必要なテキスト/データを簡単に抽出できます。HTML を正規表現で解析することが一般的に悪い考えである理由については、この質問を参照してください。

于 2013-03-19T01:35:49.697 に答える
0

旗は外に出るべきです：

return string.split(/\r\n?|\n|<div>(.*?)<br>(.*?)<\/div>/gis);

私は正規表現があまり得意ではありませんが、それは私にも貪欲すぎるようです。br だけを含む div だけでなく、br を含むすべての div に一致すると思います。それらがネストされている場合は、最も外側のものと一致する必要があります。コメントで提案されているように、DOM をトラバースすることでこの問題に取り組みます。

于 2013-03-19T01:12:46.040 に答える
0

潜在的な問題がいくつか見られます: (1) フラグ ( ) をマークgisの外に置きたい。//(2) の最初の使用では、|かっこが\r,\nまたはに一致する必要があります\r\n。ただし、これらはおそらくまったく必要ありません。(3) なぜあなたがここに代理を持っているのかわかりません: \n|<div>. (4)sは、私が認識しているフラグではありません。

これでうまくいくはずです：

/<div>(.*?)<br>(.*?)<\/div>/gi
于 2013-03-19T01:14:14.740 に答える
0

1) 正規表現フラグは「/」を閉じた後にある必要があります

2) .* の代わりに [\S\s]* を使用

3) 「<」は「<」に置き換える必要があるため、「<text」は誤った HTML コードです。

于 2013-03-19T01:16:00.550 に答える