Détecter un retour à la ligne avec JQUERY

Version imprimable

04/09/2019, 17h58
bza88

Détecter un retour à la ligne avec JQUERY

salut,
j'ai des chaines de caractère qui sont très longs, je voudrais couper chaque chaine au deuxième retour a la ligne de sorte que chaque chaine ne sois que sur deux lignes. le reste de la chaine ne sera affiché qu'au survol (hover) de la ligne avec la souris. comment m'y prendre pour détecter le retour a la ligne ?
merci.

Bonjour,

à adapter : https://codepen.io/jreaux62/pen/jONaxNo

Code:

1
2
3
4
5
6
7
8
9
<textarea>Hac ex causa conlaticia stipe Valerius humatur ille Publicola et subsidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patris.
  Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.
  Postremo ad id indignitatis est ventum, ut cum peregrini ob formidatam haut ita dudum alimentorum inopiam pellerentur ab urbe praecipites, sectatoribus disciplinarum liberalium inpendio paucis sine respiratione ulla extrusis, tenerentur minimarum adseclae veri, quique id simularunt ad tempus, et tria milia saltatricum ne interpellata quidem cum choris totidemque remanerent magistris.
  Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant.
  Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam, eius uxorem, Constantius ad se tandem desideratam venire multis fictisque blanditiis hortabatur. quae licet ambigeret metuens saepe cruentum, spe tamen quod eum lenire poterit ut germanum profecta, cum Bithyniam introisset, in statione quae Caenos Gallicanos appellatur, absumpta est vi febrium repentina. cuius post obitum maritus contemplans cecidisse fiduciam qua se fultum existimabat, anxia cogitatione, quid moliretur haerebat.
  Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum.
 
</textarea>
<div id="the_div"></div>

Code:

1
2
3
4
5
6
textarea { display:none; }
#the_div .hide { display:none; }
#the_div .more { display:block; color:green; }
/* on affiche le reste du texte sur :hover */
#the_div:hover .hide { display:block; color:red; }
#the_div:hover .more { display:none; }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$(function(){
  //  $('textarea').on('blur',function() {
  var text = $('textarea').val().trim(); // contenu à traiter
  var text_arr = text.split("\n");
  //   console.log( text_arr );
  if( text_arr.length>2) // si on a + de 2 lignes de texte
  {
    // ------------
    // affichage
    var the_div = $('#the_div');
    the_div.html(text_arr[0]+"<br/>"+text_arr[1]); // affiche les 2 première lignes
    // ------------
    var the_more_span = $('<span>'); // on crée un span
    the_more_span.addClass("more"); // avec la class "more"
    the_more_span.html('[...]');
    the_div.append(the_more_span);
    // ------------
    var texthide = text_arr.splice(2,2); // on supprime les 2 1ers (déja affichés)
    texthide = texthide.join("<br/>");
    the_div.append(the_hide_div);
    // ------------
    var the_hide_div = $('<div>'); // on crée un div
    the_hide_div.addClass("hide"); // avec la class "hide"
    the_hide_div.html(texthide);
    // -----
    the_div.append(the_hide_div);
  }
  //  });
});

Une variante :

Code:

1
2
3
4
5
6
7
8
9
<textarea>Hac ex causa conlaticia stipe Valerius humatur ille Publicola et subsidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patris.
  Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.
  Postremo ad id indignitatis est ventum, ut cum peregrini ob formidatam haut ita dudum alimentorum inopiam pellerentur ab urbe praecipites, sectatoribus disciplinarum liberalium inpendio paucis sine respiratione ulla extrusis, tenerentur minimarum adseclae veri, quique id simularunt ad tempus, et tria milia saltatricum ne interpellata quidem cum choris totidemque remanerent magistris.
  Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant.
  Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam, eius uxorem, Constantius ad se tandem desideratam venire multis fictisque blanditiis hortabatur. quae licet ambigeret metuens saepe cruentum, spe tamen quod eum lenire poterit ut germanum profecta, cum Bithyniam introisset, in statione quae Caenos Gallicanos appellatur, absumpta est vi febrium repentina. cuius post obitum maritus contemplans cecidisse fiduciam qua se fultum existimabat, anxia cogitatione, quid moliretur haerebat.
  Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum.
 
</textarea>
<div id="the_div"></div>

Code:

1
2
3
4
textarea { display:none; }
#the_div .more { display:none; }
/* on affiche le reste du texte sur :hover */
#the_div:hover .more { display:block; color:red; }

Code:

1
2
3
4
5
6
7
$(function(){
  var text = $('textarea').val().trim(); // contenu à traiter
  var reg =/([^\n]+\n{2}).*/g;
  var text_arr = text.match(reg);
console.log(text_arr);
 $("#the_div").html(text_arr[0] + '<div class="more">'+text_arr[1]+'</div>'); 
});

@SpaceFrog +1 :ccool:

1- Petite correction (une parenthèse mal placée) :

Code:

var reg =/([^\n]+\n){2}.*/g;

2- Attention aussi si le texte ne satisfait pas à la regex (s'il a moins de 2 passages à la ligne) : TypeError: text_arr is null
Code:

1 2 3 4 5 6 7 8 9 10 11 $(function(){ var text = $('textarea').val().trim(); // contenu à traiter reg =/([^\n]+\n){2}.*/g; var text_arr = text.match(reg); if( text_arr !== null ) { $("#the_div").html(text_arr[0] + '<div class="more">'+text_arr[1]+'</div>'); } else { $("#the_div").html(text); } });

salut,
j'applique ton exemple avec du javascript, mais il ne "split" pas certaines chaines qui sont longues. il entre toujours dans le sinon alors que j'ai des chaines qui font plus de 2 lignes voir même 3 lignes. je voudrais comprendre. voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
if(objectsData[i].nearest_region != "" || objectsData[i].nearest_region != null){
  $("#object_address_" + i).html(objectsData[i].nearest_region);
  $("#object_address_" + i).css("display", "none");
	if($("#object_address_" + i).text().trim()){
       var txt = $("#object_address_" + i).text().trim();
       var text_arr = txt.split("\n");
   if(text_arr.length>2){//si on a plus de 2 lignes de text
	console.log("string 0  \t" + text_arr[0]);
	console.log("string 1 \t" + text_arr[1]);
	console.log("string 2 "\t + text_arr[2]);										             
}else{
 console.log("else \t\t " + text_arr);
   }
 
}
}

qu'est ce qui ne va pas avec mon code ? merci.

05/09/2019, 18h38
Invité

Et avec :

Code:

var txt = $("#object_address_" + i).html().trim();

et

Code:

var text_arr = txt.split("<br/>"); // <br/> ? <br> ?

?
05/09/2019, 19h00
bza88

salut,
sa ne resouds toujours pas mon problème. il ne "split" toujours pas. les chaines ne sont toujours pas coupées. merci.

Est- que le contexte d'affichage est dynamique ?

Est-ce le texte affiché contient des balises html ou des caracteres spécaiux ( ex   ) ?

Dans le cas ou les réponses sont " non " pour les 2:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="texte_1">Hac ex causa conlaticia stipe Valerius humatur ille Publicola et subsidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patris.
  Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.
  Postremo ad id indignitatis est ventum, ut cum peregrini ob formidatam haut ita dudum alimentorum inopiam pellerentur ab urbe praecipites, sectatoribus disciplinarum liberalium inpendio paucis sine respiratione ulla extrusis, tenerentur minimarum adseclae veri, quique id simularunt ad tempus, et tria milia saltatricum ne interpellata quidem cum choris totidemque remanerent magistris.
  Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant.
  Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam, eius uxorem, Constantius ad se tandem desideratam venire multis fictisque blanditiis hortabatur. quae licet ambigeret metuens saepe cruentum, spe tamen quod eum lenire poterit ut germanum profecta, cum Bithyniam introisset, in statione quae Caenos Gallicanos appellatur, absumpta est vi febrium repentina. cuius post obitum maritus contemplans cecidisse fiduciam qua se fultum existimabat, anxia cogitatione, quid moliretur haerebat.
  Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum.
</div>
 
<br>
<br>
 
<div id="texte_2">Hac ex causa conlaticia stipe Valerius humatur ille Publicola et subsidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patris.
  Latius iam disseminata licentia onerosus bonis omnibus Caesar nullum post haec adhibens modum orientis latera cuncta vexabat nec honoratis parcens nec urbium primatibus nec plebeiis.
  Postremo ad id indignitatis est ventum, ut cum peregrini ob formidatam haut ita dudum alimentorum inopiam pellerentur ab urbe praecipites, sectatoribus disciplinarum liberalium inpendio paucis sine respiratione ulla extrusis, tenerentur minimarum adseclae veri, quique id simularunt ad tempus, et tria milia saltatricum ne interpellata quidem cum choris totidemque remanerent magistris.
  Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo imperii dicebatur, et iracundae suspicionum quantitati proximorum cruentae blanditiae exaggerantium incidentia et dolere inpendio simulantium, si principis periclitetur vita, a cuius salute velut filo pendere statum orbis terrarum fictis vocibus exclamabant.
  Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam, eius uxorem, Constantius ad se tandem desideratam venire multis fictisque blanditiis hortabatur. quae licet ambigeret metuens saepe cruentum, spe tamen quod eum lenire poterit ut germanum profecta, cum Bithyniam introisset, in statione quae Caenos Gallicanos appellatur, absumpta est vi febrium repentina. cuius post obitum maritus contemplans cecidisse fiduciam qua se fultum existimabat, anxia cogitatione, quid moliretur haerebat.
  Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum.
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
Set_X_lines('texte_1',2)
Set_X_lines('texte_2',2)
 
function Set_X_lines(ref_ID, nbVisible)
{
  let leTexte = document.getElementById(ref_ID)
    , Txt_ref = leTexte.textContent.trim()
 
  leTexte.textContent = ''
 
  let txt_H  = leTexte.clientHeight
    , pos    = 0
    , Pesp   = 0
 
  while (nbVisible>=0 && pos < Txt_ref.length )
  {
    if (Txt_ref.charAt(pos)==' ') Pesp = pos
    leTexte.textContent += Txt_ref.charAt(pos++)
 
    if ( txt_H != leTexte.clientHeight)
    {
      txt_H = leTexte.clientHeight
      nbVisible--
    }
  }
 
  if (pos >= Txt_ref.length) return
 
  leTexte.textContent = Txt_ref.substring(0,++Pesp)
 
  let S1 = document.createElement('span')
    , S2 = document.createElement('span')
 
 
  S1.textContent = '\u00a0'.repeat(pos-Pesp) + ' [\u00a0+\u00a0]'
  S2.textContent = Txt_ref.substring(Pesp)
 
 
  S1.style.color   = 'red'
  S2.style.display = 'none' 
 
 
  leTexte.appendChild(S1)
  leTexte.appendChild(S2)
 
  S1.onmouseover =_=>
  {
    S1.style.display = 'none' 
    S2.style.display = 'inline' 
  }  
  S2.onmouseout =_=>
  {
    S1.style.display = 'inline' 
    S2.style.display = 'none' 
  }  
}