11488 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Regular Expression

Bonjour à tous
J'ai une table d'adresses qui comporte un champ contenant éventuellement plusieurs lignes,
par exemple
Résidence St Louis
40 rue de Nantes

Ce champ provient directement d'une base de données MySQL sous la forme
Résidence St Louis\r\n40 rue de Nantes

Pour afficher ce champ dans une <td>, je voudrais obtenir
<td>Résidence St Louis<br>40 rue de Nantes


Je ne parviens pas à écrire l'expression qui effectue cette conversion :

cell.innerHTML = value.replace(/\\r\\n/, '<br>');

ou de même la conversion inverse :

let value = cell.innerHTML.replace(/<br>/, '\r\n');

Je pense que cela a à voir avec les protection par \\ mais je ne m'y retrouve pas sur le nombre de \ à utiliser dans la première ou la deuxième expression.

Merci de votre aide.
Modifié par PapyJP (24 Apr 2024 - 19:12)
Bonsoir,

Je vais suivre ton fil avec attention car j'ai été confronté au même problème sous Postgres et Node.js. Je m'en suis tiré de manière triviale*** mais j'aimerais bien connaître le fin mot de l'histoire.

___
*** Utilisation d'un éditeur Markdown (Marked.js) qui, s'il fonctionne bien, est surdimensionné par rapport à mes besoins. Je rêve de le remplacer par quelques regex... mais ça commence d'abord par affronter la même problématique que toi.
Bonjour, 

<p id="p"></p>
<p id="p2"></p>



    const paragraph = "Résidence St Louis\r\n40 rue de Nantes";
    const paragraph2 = "Résidence St Louis<br>40 rue de Nantes";
    
    document.getElementById('p').innerHTML = paragraph.replace(/\r\n/, '<br>');
    document.getElementById('p2').innerText = paragraph2.replace('<br>', '\\r\\n');

Affiche pour le premier paragraphe : 
Résidence St Louis
40 rue de Nantes

et pour le second 
Résidence St Louis\r\n40 rue de Nantes

notez que la regex dans ce cas précis peut êtes également un string.
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace
L'équivalent en PHP est la fonction nl2br()

$paragraph = "Résidence St Louis\r\n40 rue de Nantes";
echo nl2br($paragraph);
Merci beaucoup
Si je comprends bien j’avais tout fait à l’envers !

Note : j’utilise très souvent des RegEx sous forme de string, mais la lecture de cette page m’a montré qu’il y avait des foutlitudes de possibilités que j’ignorais. Par contre je n’ai toujours pas compris quand il fallait ou non doubler les \
Modifié par PapyJP (25 Apr 2024 - 08:50)
Après essais, 

cell.innerHTML = value.replace(/\r\n/g, '<br>');
// et
let value = cell.innerHTML.replace(/<br>/g, '\r\n');

cela permet d'afficher la valeur provenant de la base de données et de retrouver la valeur à partir du contenu de la balise <td>
En effet j'utilise l'attribut contenteditable pour pouvoir modifier les données et les renvoyer dans la base suite à cette discussion
Contrairement à ce que je craignais, je n'ai pas -- pour le moment -- rencontré d'autres difficultés dans l'utilisation de cette méthode.
Modifié par PapyJP (25 Apr 2024 - 11:47)
Salut,

de ce que j'en comprends de vos messages, j'ai l'impression vous vous compliquez la vie pour rien Smiley sweatdrop

Il faut juste remplir le innerHTML ou le innerText en fonction de ce que tu as comme valeurs.
Petit jsfiddle pour illustrer : https://jsfiddle.net/L1sz5fob/

Et si tu restes sur les replace, je suppose qu'il faudra basculer sur du global au cas où il y a besoin de plusieurs lignes :
- replaceAll pour la fonction
- un g pour la regex /\r\n/ => /\r\n/g

Edit pour adapter ton bout de code : 

cell.innerText = value;
// et
let value = cell.innerText;

Modifié par Mathieuu (25 Apr 2024 - 11:43)
Meilleure solution
Merci @Mathieuu
Je venais juste de corriger mon post avec les /.../g, mais ta solution avec innerText est nettement meilleure.
Modifié par PapyJP (25 Apr 2024 - 11:54)
Reste un petit problème : dans la base de données j'ai
Résidence St Louis\r\n40 rue de Nantes

innerText contient
Résidence St Louis\n40 rue de Nantes

(sans le \r) ce qui fait que le programme interprète cette valeur comme modifiée.
je vais faire

value = value.replace(/\r/g, '');
Je ne pige pas pourquoi ils n'ont toujours pas réussi à se mettre d'accord pour normaliser ça Smiley nimp
Cela doit faire facilement 20 ans qu'on se trimbale toujours ces problèmes à la Smiley censored de CR (\r ) vs LF (\n) vs CRLF ( \r\n ) ..

Je dirais que ça doit être le signe que Javascript à pris le parti de n'utiliser que \n vu que le \r saute.
Il y a quelques années j'avais eu un peu le même genre de problème sur git, si je me souviens bien leur solution par défaut eux c'était CRLF.
Bonsoir,

a écrit :
Par contre je n’ai toujours pas compris quand il fallait ou non doubler les \


Dans la notation littérale /regex/options, on ne doit pas échapper les \.
C'est quand on écrit sous forme de string qu'on doit échapper les \.

a écrit :
Je dirais que ça doit être le signe que Javascript à pris le parti de n'utiliser que \n vu que le \r saute.


Ca me parait être un pari risqué.
Il faudrait être sûr que c'est bien le cas avec tous les navigateurs sur toutes les plate-formes.

Le mieux est encore d'utiliser une regex qui cadre tous les cas:
/\r?\n/g

OU si on a aussi du \r seul sans \n (seulement pour les mac avant OS X):
/\r\n|\n|\r/g


Certains moteurs d'expressions régulières connaissent un littéral \R qui symbolise un saut de ligne quelqu'en soit sa forme \n, \r\n ou \r. Parfois il existe aussi une option.
C'est le cas du moteur PCRE notamment utilisé en PHP, mais aussi d'autres langages, et éditeurs de texte (sauf erreur Notepad++).
J'ai essayé à tout hasard et malheureusement, en JavaScript, ça n'existe pas, visiblement.
Modifié par QuentinC (25 Apr 2024 - 22:06)
Modérateur
Bonjour,

Mathieuu a écrit :
Je ne pige pas pourquoi ils n'ont toujours pas réussi à se mettre d'accord pour normaliser ça Smiley nimp

+1

Amicalement,
Modérateur
Et l'eau,

parsimonhi a écrit :
Je ne pige pas pourquoi ils n'ont toujours pas réussi à se mettre d'accord pour normaliser ça


Les standards Microsoft....

Sinon, 


<?php 
    $chaine = "Alsacréations est un \n super site d'apprentissage";
?>
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Titre du document</title>
        <link rel="stylesheet" href="css/styles.css" media="all">
    </head>
    <body>
        <p><?= $chaine ?></p>
        <script src="app.js"></script>
    </body>
</html>




String.prototype.nl2br = function(isXhtml){
    return typeof this === 'undefined' || this === null? '' : (this + '').replace(/(\r\n|\n\r|\r|\n)/g, isXhtml || typeof isXhtml === 'undefined' ? '<br ' + '/>' + '$1' : '<br>' + '$1')
}
let $p = document.querySelector('p')
$p.innerHTML = $p.innerHTML.nl2br()

Modifié par niuxe (27 Apr 2024 - 11:35)
Prévenir un modérateur
Répondre au sujet
Aller à