contentChamps modifiables pour maintenir les nouvelles lignes lors de l'entrée dans la base de données

Question

J'ai une div dont l'attribut contentEditable est défini.

Cela me permet d'avoir une zone de texte éditable de forme libre, sans avoir besoin de champs de saisie de formulaire : http://jsfiddle.net/M8wx9/8/

Cependant, lorsque je crée quelques nouvelles lignes et que je clique sur le bouton "Enregistrer", je saisis le contenu à l'aide de la fonction .text() qui supprime le saut de ligne que je viens de saisir. J'ai besoin de conserver les caractères de retour à la ligne si possible et de stocker le contenu en texte brut dans la base de données.

Je pourrais stocker le code HTML directement dans la base de données en utilisant .html() au lieu de .text() mais je n'aime pas cette idée car je pourrais avoir besoin d'extraire ces données en texte brut à l'avenir. De plus, dans Firefox, le fait d'appuyer sur Entrée coupe les nouvelles lignes avec <br> Chrome et Safari ne fonctionnent pas avec <div>...</div> et Internet Explorer et Opera utilisent des paragraphes <p>...</p> pour les nouvelles lignes, il ne semble donc pas très facile d'analyser le html.

Comment puis-je préserver ces sauts de ligne et stocker le contenu en tant que texte brut dans la base de données (de la même manière qu'une zone de texte) ?

Je vous prie d'agréer, Madame, Monsieur, l'expression de mes salutations distinguées, ns

Answer 1

JQuery utilise textContent sur un Node pour renvoyer la valeur textuelle d'un élément, ce qui permet de réduire les espaces blancs. Si vous souhaitez que les sauts de ligne soient conservés, vous devez utiliser la fonction innerText ce qui signifie que l'on accède à l'élément directement plutôt que par l'intermédiaire de jQuery.

A partir de votre jsfiddle :

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

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

\==== update :
A titre de mise en garde (comme l'a fait remarquer Tim Down), l'utilisation de innerText ne fonctionnera que dans les navigateurs webkit et microsoft. Si votre application prend également en charge Firefox, vous devrez utiliser des expressions régulières sur l'innerHTML afin de maintenir les sauts de ligne. A titre d'exemple :

~~

$(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/

~~

Comme indiqué dans le commentaire, le précédent ne fonctionne pas dans Chrome. Voici une solution qui fonctionne :

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

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

Answer 2

function readContentWithBreaks(elem){
  if(elem[0].innerText){
    return elem[0].innerText.replace(/\n/ig,"<br>");
  }else{
    return elem.html();
  }
}

Puisque les navigateurs webkit supportent innerText, j'ai décidé de détecter l'échange du /n qu'ils ajoutent. Pour Firefox, il donne déjà le contenu avec <br> Nous pouvons donc le prendre tel quel.