web-dev-qa-db-fra.com

Fractionner une chaîne en JavaScript et détecter un saut de ligne

J'ai trouvé une petite fonction qui prend une chaîne de textarea et la place ensuite dans un élément canvas et qui enveloppe le texte lorsque la ligne devient trop longue. Mais il ne détecte pas les sauts de ligne. Voici ce qu'il fait et ce qu'il devrait faire:

Contribution:

Hello

This is dummy text that could be inside the text area.
It will then get put into the canvas.

Mauvaise sortie:

Hello this is dummy text
that could be inside the
text area. It will then
get put into the canvas.

Qu'est-ce qu'il devrait produire:

Hello

This is dummy text that
could be inside the text
area. It will then get
put into the canvas.

C'est la fonction que j'utilise:

function wrapText(context, text, x, y, maxWidth, lineHeight) {
    var words = text.split(' ');
    var line = '';

    for(var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth && n > 0) {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
        }
        else {
            line = testLine;
        }
    }
    context.fillText(line, x, y);
}

Est-il possible de réaliser ce que j'essaie d'obtenir? Ou existe-t-il un moyen de déplacer simplement la zone de texte telle quelle dans le canevas?

javascriptstringcanvassplitline-breaks
32
Dustin Silk

Utilisez le suivant:

var enteredText = document.getElementById("textArea").value;
var numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length;
alert('Number of breaks: ' + numberOfLineBreaks);

DEMO

Maintenant, ce que j'ai fait était de scinder la chaîne first à l'aide de sauts de ligne, puis de la scinder à nouveau comme avant. Remarque: vous pouvez également utiliser jQuery combiné avec regex pour cela:

var splitted = $('#textArea').val().split("\n");               // will split on line breaks

J'espère que ça vous aide!

(Remarque: cette question a déjà été posée une fois ici ).

53
Jean-Paul

Si vous devez fractionner une chaîne de votre JSON, le caractère spécial\n est remplacé par \\ n.

Fractionner la chaîne par une nouvelle ligne:

Result.split('\n');

Chaîne divisée reçue en JSON, où le caractère spécial \ n a été remplacé par \\ n pendant JSON.stringify (en javascript) ou json.json_encode (en PHP). Ainsi, si vous avez votre chaîne dans une réponse AJAX, elle a été traitée pour le transport. et si elle n’est pas décodée, le\n sera remplacé par \\ n ** et vous devrez utiliser:

Result.split('\\n');

Notez que les outils de débogage de votre navigateur peuvent ne pas afficher cet aspect comme prévu, mais vous pouvez voir que le fractionnement par \\ n a généré 2 entrées comme j'en ai besoin dans mon cas:  enter image description here

4
profimedica

C'est ce que j'avais l'habitude d'imprimer du texte sur une toile. L'entrée ne provient pas d'une textarea, mais de input et je ne divise que par l'espace. Certainement pas parfait, mais fonctionne pour mon cas. Il retourne les lignes d'un tableau:

splitTextToLines: function (text) {
        var idealSplit = 7,
            maxSplit = 20,
            lineCounter = 0,
            lineIndex = 0,
            lines = [""],
            ch, i;

        for (i = 0; i < text.length; i++) {
            ch = text[i];
            if ((lineCounter >= idealSplit && ch === " ") || lineCounter >= maxSplit) {
                ch = "";
                lineCounter = -1;
                lineIndex++;
                lines.Push("");
            }
            lines[lineIndex] += ch;
            lineCounter++;
        }

        return lines;
    }
1
martin

Voici le code final I [OP] utilisé. Probablement pas la meilleure pratique, mais cela a fonctionné.

function wrapText(context, text, x, y, maxWidth, lineHeight) {

    var breaks = text.split('\n');
    var newLines = "";
    for(var i = 0; i < breaks.length; i ++){
      newLines = newLines + breaks[i] + ' breakLine ';
    }

    var words = newLines.split(' ');
    var line = '';
    console.log(words);
    for(var n = 0; n < words.length; n++) {
      if(words[n] != 'breakLine'){
        var testLine = line + words[n] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth && n > 0) {
          context.fillText(line, x, y);
          line = words[n] + ' ';
          y += lineHeight;
        }
        else {
          line = testLine;
        }
      }else{
          context.fillText(line, x, y);
          line = '';
          y += lineHeight;
      }
    }
    context.fillText(line, x, y);
  }
0
jacksondc

Fractionner la chaîne en JavaScript

var array = str.match(/[^\r\n]+/g);

OR

var array = str.split(/\r?\n/);
0
TinhNQ

Vous devriez essayer de détecter la première ligne.

Puis le:

if(n == 0){
  line = words[n]+"\n";
}

Je ne suis pas sûr, mais peut-être que ça aide.

0
Netzach