内容編集可能なdivを '</br>'から削除する

Question

HTML内にcontenteditableという要素があります。そして、ユーザーが（改行）を押した結果として挿入される<div>と</br>のようなhtmlタグからdivコンテンツを消去する問題に関連するインターネットでの投稿は見つかりませんでした。

つまり、ユーザがを入力した場合は、と入力します。ユーザー入力は、追加のhtmlタグを使用してデータベースに送信されます。

この問題の最もクリーンな解決策は何ですか？

_{質問が重複している場合、私は申し訳ありませんが、私は他の場所で}

$(function() { 
 
    $('button').click(function() { 
 
    alert($('#test').html()); 
 
    }); 
 
});

#test { 
 
    line-height: 1.14; 
 
    border: solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='test' contenteditable='true'></div> 
 
<button>Show me div input</button>

Answer 1

.html()方法は<br>要素として改行を返します。

代わりに.text()メソッドを使用できます。ただし、改行はすべて削除されます。

$(function() { 
 
    $('button').click(function() { 
 
    alert($('#test').prop('innerText')); 
 
    }); 
 
});

#test { 
 
    line-height: 1.14; 
 
    border: solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='test' contenteditable='true'></div> 
 
<button>Show me div input</button>

：あなたは改行を維持したい場合は

は、innerTextプロパティを使用します

Answer 2

.html()説明、まさにこの問題はすべて取得、それはそれはやっていると言う正確に何やってたことができませんでしたテキストに加えて、<br>タグのような任意のhtml。あなたが実際に代わりにしたいのは.text()です。

$(function() { 
 
    $('button').click(function() { 
 
    alert($('#test').text()); 
 
    }); 
 
});

#test { 
 
    line-height: 1.14; 
 
    border: solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='test' contenteditable='true'></div> 
 
<button>Show me div input</button>