Javascript：模拟不格式化的字符串输入，格式化输出

Question

问题

---

这是一个有趣的问题：（我不擅长解释，所以不妨先看看例子：P）

我有一个带有 (ansi) 格式代码的字符串，我想输出该字符串的所有字符，除了所有格式代码之外，它会慢慢建立一个字符串，直到找到一组特定的字符（§z）然后输出直到该点的所有内容，但带有格式代码。并开始输入消息的其余部分。每当达到 §z 时，打印（带格式）并再次开始输入（不带格式）。

哦，在这个过程中，可以将一些东西添加到“缓冲区”中...... （所以我不能只使用 .split("§z")）

示例

---

假设我有这个字符串：

"[33;22m[1mWelcome![m§z 你好[m"

然后作者会每秒输出一个字符，直到达到 §z：

打字：W
打字：我们
直到欢迎！

现在它看到了 §z 并记录了第一部分，但带有格式代码：

输出：[33;22m[1m欢迎！[m

然后它重新开始并开始输出消息的其余部分：

打字： 打字：直到 你好

因为没有任何 §z 它停止并且不输出任何内容。

现在，突然发生了一个将这个添加到字符串中的事件：

再见！§z

它现在会继续打字：

打字： Hello G
输入： Hello Go
直到 Hello Goodbye！

达到了 §z 所以它会输出：

输出： Hello[m Goodbye!

代码

---

我已经有了这个代码并且它可以工作，但是所有的格式都丢失了。

//TODO Work out this printing stuff...
var contentBuffer = "";

var displayContent = "";

var buffering = false;

var INPUT = "";


//Print function
function printMessage() {
    
	//Remove the formatting. The user doesn't type in formatted code, so we don't either.
    var noFormat = INPUT.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '');
	contentBuffer += noFormat;
	if(!buffering){
		buffering = true;
		buffer();
	}
}

function buffer(){
	if(contentBuffer != ""){
		if(contentBuffer[0] != "§"){
			displayContent += contentBuffer[0];
			document.write("Typing: " + displayContent + "<br />");
			contentBuffer = contentBuffer.slice(1);
		}else{ //Special sign handlers.
			if(contentBuffer[1] == "z"){
				//Echoing now! But our formatting is gone! :(
				document.write("Output: " + displayContent + " This output had to contain formatting, but we lost that on our quest to Mordor :(<br />");
				displayContent = "";
			}
			//Remove the newline code.
			contentBuffer = contentBuffer.slice(2);
		}
		setTimeout(buffer, 1000);
	}else{
      
		buffering = false;
	}
}

function suddenEvent(){
 document.write("<b>SUDDENLY AN EVENT OCCURED!</b><br/>");
 INPUT = "Goodbye!§z";
 printMessage();
}

//Run it:

INPUT = "\x1b[33;22m\x1b[1mWelcome!\x1b[m§z<27> Hello \x1b[m";
document.write("Input: " + INPUT + "<br /><br />");
printMessage();
setTimeout(suddenEvent, 25000);

Answer 1

也许我不太理解这个问题。但如果您的问题是如何在 document.write 中添加另一种颜色，您可以在输出字符串中添加 "<span style=\"color:green;\">"+output+"</span>"。

（在本例中，为绿色）

//TODO Work out this printing stuff...
var contentBuffer = "";

var displayContent = "";

var buffering = false;

var INPUT = "[33;22m[1mWelcome![m§z<27> Hello [m";


//Print function
function printMessage() {
    
	//Remove the formatting. The user doesn't type in colors, so we don't either.
	contentBuffer += INPUT.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '');
	if(!buffering){
		buffering = true;
		buffer();
	}
}

function buffer(){
	if(contentBuffer != ""){
		if(contentBuffer[0] != "§"){
			displayContent += contentBuffer[0];
			document.write("Typing: " + displayContent + "<br />");
			contentBuffer = contentBuffer.slice(1);
		}else{ //Special sign handlers.
			if(contentBuffer[1] == "z"){
				//Echoing now! But our colors are gone! :(
				document.write( "<span style=\"color:green;\">Output: " + displayContent + " This output had to contain colors, but we lost them on our way to Bree :(</span><br />");
				displayContent = "";
			}
			//Remove the formatting code.
			contentBuffer = contentBuffer.slice(2);
		}
		setTimeout(buffer, 1000);
	}else{
      
		buffering = false;
	}
}

function suddenEvent(){
  document.write("<b>SUDDENLY AN EVENT OCCURED!</b><br/>");
 INPUT = "Goodbye!§z";
 printMessage();
}

//Run it:
document.write("Input: " + INPUT + "<br /><br />");
printMessage();
setTimeout(suddenEvent, 25000);

Answer 2

解决方案

---

这是我解决问题的方法（目前）：

我知道每个格式代码都以转义字符开头，并且（因为无论如何我只使用 ansi-color 格式代码）它们都以字母“m”结尾。就像我说的那样，简单地拆分字符串不是一种选择，而是我制作了两个单独的字符串。缓冲区将追加到这两个字符串，除非它到达转义字符，然后它只会追加到其中一个，直到到达“m”，然后继续正常行为。

代码

---

//TODO Work out this printing stuff...
var contentBuffer = "";

var displayContent = "";
var typeContent = "";

var buffering = false;

var INPUT = "";


//Print function
function printMessage() {
    
	//Remove the formatting. The user doesn't type in formatted code, so we don't either.
	contentBuffer += INPUT;
	if(!buffering){
		buffering = true;
		buffer();
	}
}

function buffer(){
  if(contentBuffer != ""){
    if(contentBuffer[0] == "§"){
      if(contentBuffer[1] == "z"){
        document.write("Output: " + displayContent + "<br />");
        typeContent = "";
        displayContent = "";
      }
      contentBuffer = contentBuffer.slice(2);
    }else if(contentBuffer[0] == "\x1b"){ //Escape character is detected!
      for(var i = 0, len = contentBuffer.length; i < len; i++){
        displayContent += contentBuffer[i];
        if(contentBuffer[i] == "m"){
          contentBuffer = contentBuffer.slice(i+1);
          break;
        }
      }
    }else{
      typeContent += contentBuffer[0];
      displayContent += contentBuffer[0];
      document.write("Typing: " + typeContent + "<br />");
      contentBuffer = contentBuffer.slice(1);
    }

    setTimeout(buffer, 1000);
  }else{
    buffering = false;
  }
}

function suddenEvent(){
 document.write("<b>SUDDENLY AN EVENT OCCURED!</b><br/>");
 INPUT = "Goodbye!§z";
 printMessage();
}

//Run it:

INPUT = "\x1b[33;22m\x1b[1mWelcome!\x1b[m§z<27> Hello \x1b[m";
document.write("Input: " + INPUT + "<br /><br />");
printMessage();
setTimeout(suddenEvent, 28000);

它不是特别干净，但它按我想要的方式工作。