在JavaScript/p5.js中将单行字符串拆分为多行字符串 [英] Split single line string into multiline string in JavaScript/p5.js

问题描述

我有一个.csv文件，该文件是通过p5.js草图在JavaScript中调用的.其中一个字段包含从103个字符到328个字符的句子.我的脚本调用数据并随机显示在画布上.由于某些句子很长，因此无法正确地适合画布，因此我想将它们拆分为两行或三行字符串.

I have a .csv file that I'm calling in JavaScript through a p5.js sketch. One of the fields contains sentences that range from 103 char to 328 char. My script calls the data and displays in randomly on the canvas. Because some of the sentences are very long, they aren't fitting on the canvas properly, so I'd like to split them into 2- or 3-line strings.

我已阅读模板文字和JavaScript文档中的 RegExp ，但是所有示例都使用写为变量的字符串变量.因此，例如，在我的数据中是这样的:

I've read up on Template Literals and RegExp in the JavaScript documentation, but all of the examples use string variables written out as a variable. So, for example, something like this in the case of my data:

var myString = `We can lift up people and places who've been left out, 
        from our inner cities to Appalachia,  
        in every manufacturing town hollowed out when the factory closed, 
        every community scarred by substance abuse, 
        every home where a child goes to bed hungry.`

该Template Literal将作为多行对象打印到画布上.但是我需要做的是让JavaScript从数据中的statements数组创建一个多行对象.

That Template Literal would print to the canvas as a multiline object. But what I need to do is have JavaScript create a multiline object from the statements array in my data.

我有一个constructor和prototype来格式化句子的颜色，大小，x/y位置和运动.

I have a constructor and a prototype that format the color, size, x/y placement, and motion of the sentences.

// Function to align statements, categories, and polarity
function Statement(category, polarity, statement) {
  this.category = category;
  this.statement = statement;
  this.polarity = polarity;
  this.x = random(width/2);
  this.y = random(height);
  this.dx = random(-speed, speed);
  this.dy = random(-speed, speed);
}
// Attach pseudo-class methods to prototype;
// Maps polarity to color and x,y to random placement on canvas
Statement.prototype.display = function() {
  this.x += this.dx;
  this.y += this.dy;
  if(this.x > width+10){
    this.x = -10
  }
  if(this.y > height+10) {
    this.y = -10
  }
  if(this.polarity == -1){
    fill(205, 38, 38);
  }
  else if(this.polarity == 1){
    fill(0, 145, 205);
  }
  else{
    fill(148, 0, 211);
  }
  textSize(14);
  text(this.statement, this.x, this.y);
}

所以我想我想知道的是是否需要创建一个RegExp(如String.split("[\\r\\n]+"))并将\r\n添加到数据中，如果是的话，该将它放在脚本中的什么位置.我在Statement.display.prototype中进行了尝试，但由于语句无法加载，它似乎破坏了整个脚本.

So I suppose what I'm wondering is whether I need to create a RegExp, like String.split("[\\r\\n]+") and add \r\n into the data, and if so, where would I put it in my script. I tried in in the Statement.display.prototype, but it just seemed to break the whole script as the statements wouldn't load.

编辑:由于我没有生成最小，完整，可验证示例，其中最小"是我被牢牢抓住的部分.也就是说，这是我的代码的顶部.

I am adding this edit with some trepidation, as I got nailed for not producing a Minimal, Complete, Verifiable example, with "minimal" being the part I got nailed on. That said, here is the top part of my code.

var clContext;
var speed = 0.8;
var statements = [];
var category = [];
var canvas;



      //load the table of Clinton's words and frequencies
function preload() {
        clContext = loadTable("cl_context_rev.csv", "header");
      }

function setup() {
  canvas = createCanvas(680, 420);
  canvas.mousePressed(inWidth);
  background(51);
  // Calling noStroke once here to avoid unecessary repeated function calls
  noStroke();
  // iterate over the table rows
  for (var i = 0; i < clContext.getRowCount(); i++) {
    var category = clContext.get(i, "category");
    var statement = clContext.get(i, "statement");
    var polarity = clContext.get(i, "polarity");
    statements[i] = new Statement(category, polarity, statement);
  }
}

function draw() {
  if (mouseIsPressed) {
    background(51);
    for (var i = 0; i < statements.length; i++) {
      statements[i].display();
    }
  }
}

我已经添加了它，只是为我要拆分的数据类型提供了上下文.似乎有两点可以进行拆分:在安装程序中创建的statement数组，或在构造函数中的statements数组.这意味着如果我进入数据文件并在要拆分的地方添加\n，这很容易，因为只有20条语句，那么如何最好和在哪里构造将拆分这些行的RegExp呢? /p>

I've added that only to provide context for the data type I'm trying to split. There seems to be two points at which I could do the split: the statement array created in setup, or the statements array from the constructor. Meaning that if I go into my data file and add \n where I want to split, which is easy enough as there are only 20 statements, how and where is it best to construct a RegExp that will split those lines?

推荐答案

如果我完全了解您的需要，我不知道，但是您可以使用它从模板中获取数组

I dunno if I understand exactly that you want, but you can use this to get an array from template

var myString = `We can lift up people and places who've been left out, 
        from our inner cities to Appalachia,  
        in every manufacturing town hollowed out when the factory closed, 
        every community scarred by substance abuse, 
        every home where a child goes to bed hungry.`
        
var array = myString.replace(/,/gi, "").split("\n").map(x => x.trim());

console.log(array);

基本上，我用replace(/,/gi, "")删除了示例中的所有逗号，然后拆分为\n，最后将其修剪.

Basically I removed all the commas of your example with replace(/,/gi, ""), then split for \n, and finally trim it.

这篇关于在JavaScript/p5.js中将单行字符串拆分为多行字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！