Javascript:模拟字符串的键入而不格式化，然后使用格式化输出它

Javascript: Emulate typing of string without formatting, then output it with formatting

本文关键字：格式化 然后 输出 模拟 字符串 Javascript      更新时间：2023-09-26

>问题

这里有一个有趣的问题：（我不擅长解释，所以也许先看一下例子:P）

我有一个带有 （ansi） 格式代码的字符串，我想输出该字符串的所有字符，除了所有格式化代码，以便

它慢慢构建一个字符串，直到找到一组特定的字符 （§z） 然后输出到那时为止的所有内容，但使用格式代码。然后开始键入消息的其余部分。每当达到§z时，打印（带格式）并再次开始键入（不格式化）。

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

例

假设我有这个字符串：

"[33;22米[1米欢迎！m§z<27> 你好[m"

然后，编写器每秒输出一个字符，直到它达到 §z：

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

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

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

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

打字：<<br/> 键入： <2 直到<27>你好

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

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

再见！

它现在将继续键入：

键入： <27> 你好 G
打字： <27> 你好去
直到你好，再见！

达到 §z，因此它将输出：

输出： <27> 你好[再见！

法典

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

//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);

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

（在此示例中，为绿色）

//TODO Work out this printing stuff...
var contentBuffer = "";
var displayContent = "";
var buffering = false;
var INPUT = "Welcome!§z<27> Hello ";
//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);

解决方案

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

我知道每个有条件的代码都以转义字符开头，并且（因为我无论如何只使用 ansi 颜色格式代码）它们都以字母"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);

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

相关文章：