3

私は非常に少量のコードを見ています:

var val = $("#id_input").val();
$("#output").text(val);

これは基本的に入力をフィールドに取り、<textarea id="id_input"></textarea>それをそのまま出力します。

私がやろうとしているのは、a で始まる入力改行をサイトの-出力<ul><li></li></ul>に変換することです....

私が行ってきたアプローチは、入力を行ごとに分割し、各行をこれに通した後、それらを連結することです:

function startsWith(string, pattern) {
  return string.slice(0, pattern.length) == pattern;
}

show(startsWith("-"));

もっと標準的なアプローチがあるような気がしますが？たとえば、find関数を使用して同様の結果を生成する StackOverflow に関する他の投稿を読みました。実際の正規表現がないため、これらを疑っています。それは本当であるには良すぎるようです。

ここに画像の説明を入力

画像では、緑のテキストがcomments、白のテキストがinput、黒のテキストが であることがわかりますoutput。

この機能を備えた既存のテクノロジがあることは理解していますが、他の多くの機能が付属しています。この機能を分離する入力を作成しようとしています。

4

3 に答える 3

5 
uls = val.replace(/(^-.*$(?:\n^-.*$)*)/mg, "<ul>\n$1\n</ul>")
lis = uls.replace(/^-(.*)$/mg, '<li>$1</li>')
$("#output").html(val);

これはあなたが探していたものですか？完璧ではありませんが、基本的なことはできます。

次のように機能します。 

Surround the would be lists with <ul></ul>
    This works by finding lines that start with a '-' |^-.*$|,
    then matching contiguous, similar lines |(?:\n^-.*$)| 0 or more times |*|
    it uses the multiline (m) and global (g) flags too:
      match ^ and $ at the begining and end of lines (m)
      and get all the ones in the string (g)
    surround them (<ul>\n$1\n</ul>)
Surround the list items with <li></li>
     match lines with a hyphen at the beginning |^-(.*)$|
     surround them (<li>$1</li>)
于 2012-10-24T01:09:14.057 に答える
1

自分で微調整できる開始点は次のとおりです: jsFiddle。

<ul></ul>最初に を追加し、次に s を追加するという 2 つの置換を行いました<li></li>。(JavaScript が後読みアサーションをサポートしていれば、1 つのステップで行うのがより簡単だったでしょう。後読みアサーションがなくても可能ですが、面倒です。)

    val = val.replace(/((?:(?:^|[\n\r]+)[\t ]*-[\t ]*[^\n\r]*)+)/g, "\n<ul>\n$1\n</ul>");
    val = val.replace(/[\n\r]+[\t ]*-[\t ]*([^\n\r]*)/g, "\n  <li>$1</li>");

これを構築する際にいくつかの仮定を立てましたが、元に戻す必要がある場合があります。

  1. 一連の改行を 1 つの改行として扱います。
  2. の前後のスペースとタブを削除します-。

次の入力、

hello, world.
- two
- things
hi, again.
- three
 -more 
-things

次の出力を作成します。

hello, world.
<ul>
  <li>two</li>
  <li>things</li>
</ul>
hi, again.
<ul>
  <li>three</li>
  <li>more </li>
  <li>things</li>
</ul>

説明

最初の正規表現は、一連のリスト項目を識別するだけです。

(                   Captured group ($1).

    (?:             Group (one list item). -------------------+
                                                              |
        (?:         Group (for alternation). ---------+       |
                                                      |       |
            ^       Start-of-string                   |       |
                                                      |       |
            |           OR                      <-----+       |
                                                              |
            [\n\r]+     one or more newlines.                 |
                                                              |
        )                                                     |
                                                              |
        [\t ]*      (Ignore tabs and spaces.)                 |
        -           (Dash.)                                   |
        [\t ]*      (Ignore tabs and spaces.)                 |
                                                              |
        [^\n\r]*    List item text (everything but newlines). |
                                                              |
    )                                                         |
    +               One or more list items. <-----------------+

)

に取り込まれたこの一連のリスト アイテムは、タグ$1で囲まれています。<ul></ul>

"\n<ul>\n$1\n</ul>"

2 番目の正規表現は、各リスト アイテムをタグでラップし<li></li>ます。これは最初の正規表現と非常に似ているため、何が変更されたかを示す方が便利な場合があります。

first regex  : /((?:(?:^|[\n\r]+)[\t ]*-[\t ]* [^\n\r]* )+)/g
differences  :  xxxxxxxxx       x             (        )xxx
second regex : /         [\n\r]+ [\t ]*-[\t ]*([^\n\r]*)   /g

言葉で、

  1. リスト項目のセットは気にせず、各リスト項目だけを気にするので、定量化(?:...)+に使用されたキャプチャ不可能なグループを削除できます。

  2. 最初の正規表現置換 (先頭\n<ul>\nに a を追加) の後では、文字列の先頭からリスト項目を開始することは不可能であるため、代替を削除できます(?:^|...)。

  3. ただし、リスト アイテムのテキストをキャプチャすることに関心があるため、キャプチャ グループ を追加し(...)ます。

于 2012-10-24T01:05:37.317 に答える
1

正規表現の使用に夢中になっている理由はありますか? 効率的で簡潔な点は優れていますが、後で読み返すと読みにくいと感じることがよくあります。

私はおそらくあなたと同じ方法で問題に取り組みますが、サブリストを処理するために各リスト項目を独自のリストにラップするだけです:

<ul><li>item 1</li></ul>
<ul><li>item 2</li></ul>

それよりも：

<ul>
<li>item 1</li>
<li>item 2</li>
</ul>

リスト項目と非リスト項目の混合を適切に処理します。このアプローチを使用しない唯一の理由は、後でリスト内のすべてを一緒に操作する必要がある場合です (たとえば、最初のリストをスタイルしますが、2 番目のリストはスタイルしません)。

JsFiddle の例(ul の css を提供してくれた FrankieTheKneeMan に感謝)

于 2012-10-24T02:34:11.663 に答える