15

contentEditable属性が設定されたdivがあります。

これにより、フォーム入力フィールドを必要とせずに、自由形式の編集可能なテキストエリアを作成できます。http：//jsfiddle.net/M8wx9/8/

ただし、新しい行をいくつか作成して[保存]ボタンをクリックすると、.text()入力したばかりの改行を削除するメソッドを使用してコンテンツを取得します。可能な限り改行文字を維持し、コンテンツをプレーンテキストとしてデータベースに保存する必要があります。

.html()代わりにを使用してHTMLをデータベースに直接保存することもでき.text()ますが、将来このデータをプレーンテキストとして抽出する必要がある可能性があるため、そのアイデアは好きではありません。さらに、FirefoxでEnterキーを押すと、新しい行が途切れ<br>、ChromeとSafariが途切れ<div>...</div>、Internet ExplorerとOperaが<p>...</p>新しい行に段落を使用しているため、HTMLを解析するのは簡単ではありません。

これらのラインフィードを保持し、コンテンツをプレーンテキストとしてデータベースに保存するにはどうすればよいですか（textareaの場合と同様）。

よろしく、 ns

4

2 に答える 2

24

jQueryはを使用textContentしてNode要素のテキスト値を返します。これにより空白が圧縮されます。改行を維持したい場合はinnerText、jQueryを介さずに要素に直接アクセスすることを意味するを使用する必要があります。

jsfiddleから：

console.log($(Comments)[0].innerText);

http://jsfiddle.net/M8wx9/10/

====更新：
これに対する警告として（Tim Downが指摘しているように）、使用innerTextはWebkitおよびMicrosoftブラウザーでのみ機能します。アプリケーションがFirefoxもサポートしている場合は、改行を維持するために、innerHTMLで正規表現を使用する必要があります。例として：

$(Comments).html().trim()
.replace(/<br(\s*)\/*>/ig, '\n') // replace single line-breaks
.replace(/<[p|div]\s/ig, '\n$0') // add a line break before all div and p tags
.replace(/(<([^>]+)>)/ig, "");   // remove any remaining tags

http://jsfiddle.net/M8wx9/12/

コメントで述べたように、前のものはChromeでは機能しません。これが実用的な解決策です：

$(Comments).html().trim()
.replace(/<br\s*\/*>/ig, '\n') 
.replace(/(<(p|div))/ig, '\n$1') 
.replace(/(<([^>]+)>)/ig, "");

http://jsfiddle.net/M8wx9/81/

于 2012-12-07T13:36:11.510 に答える
1 
function readContentWithBreaks(elem){
  if(elem[0].innerText){
    return elem[0].innerText.replace(/\n/ig,"<br>");
  }else{
    return elem.html();
  }
}

WebkitブラウザはinnerTextをサポートしているので、追加した/nをそのスワップで検出することにしました。Firefoxの場合、コンテンツはすでに提供されている<br>ため、そのまま使用できます。

于 2014-07-09T22:13:11.230 に答える