LoginSignup
harmless_3d6
@harmless_3d6 (兎角 鹿角)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

複数行テキストを、pタグとbrタグで整形して表示したい

Q&AClosed

JSで複数行テキストを整形し、
段落(pタグ)、改行(brタグ)を使った形式で表示したいと考えてます。


ルール

  • 1行の文字列の場合はpタグで囲む
  • 2行以上の文字列が続く場合、接続で改行タグを使いpタグで囲む
  • 空白行が2つ以上続く場合はbrタグとする(空タグは使わない)

とりあえず動作するところまでは来ましたが、
コードがちょっと微妙な気がしてます。

function changeToParagraphGroup(str) {
  if(!str){
    return [];
  }

  const paragraph_groups = str.split(/\n/).reduce((result, line) => {
    if (result.is_prev_empty) {
      result.group_num++;
    }

    if (line.length === 0 && !result.is_prev_empty) {
      result.is_prev_empty = true;
      return result
    }

    const temp_key = 'paragraph_' + result.group_num;
    if (Object.keys(result.paragraph_groups).indexOf(temp_key) < 0) {
      result.paragraph_groups[temp_key] = [];
    }
    result.paragraph_groups[temp_key].push(line);
    result.is_prev_empty = line.length === 0;

    return result;
  }, {
    group_num: 0,
    is_prev_empty: false,
    paragraph_groups: {}
  }).paragraph_groups;

  return Object.values(paragraph_groups).map( lines => {
    return {
      is_exists : lines.join('').length > 0,
      count : lines.length,
      lines
    }
  });
}

「こうした方が良い」という改善策、
もしくはおすすめのライブラリなどあれば教えてほしいです。

よろしくお願いします。

See the Pen Untitled by radi mats (@rmts) on CodePen.

0

1Answer

仕様はこういう事ですか?

  • 1行の文字列の場合はpタグで囲む
abc123 => <p>abc123</p>

abc123 => <p>abc123</p>

abc123 => <p>abc123</p>
  • 2行以上の文字列が続く場合、接続で改行タグを使いpタグで囲む
abc123 => <p>abc123<br/>def456</p>
def456

abc123 => <p>abc123<br/>def456<br/>xxxyyy</p>
def456
xxxyyy
  • 空白行が2つ以上続く場合はbrタグとする(空タグは使わない)


abc123 => <br/>abc123



abc123 => <br/>abc123 なのか <br/><br/>abc123 なのか

あと、「空白行」とはより正確には\nだけの行なのか?trimしてlengthが0な文字列のことなのか?

1Like

Comments

  1. @harmless_3d6

    Questioner
    コメントありがとうございます。

    「1行の文字列の場合はpタグで囲む」
    「2行以上の文字列が続く場合、接続で改行タグを使いpタグで囲む」
    については、コメントいただいた内容の通りです。


    「空白行が2つ以上続く場合」は【\nだけの行】を想定してました。
    説明が足らずすみません!

    さらに、3は仕様が違いますね!
    ご回答ありがとうございます。
    修正します!

Your answer might help someone💌