Question

用户在文本区域输入一些输入。在输入文本后，他们单击“生成”，代码将输出完全相同的文本。

我的问题是，当我输入多行文字时，当我点击“生成”时，该功能无法考虑新行，只是打印用户在一个大行上写的内容。

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Minecraft Command Splitter by Jragon</title>
	<meta charset="utf-8">

	<h2>Please input your commands.</h2>
	<textarea id="userinput" spellcheck="false" placeholder="Write your compacted commands here and the output will split them for you!"></textarea>
	<button id="generate" onclick="thisButton(this)">Generate</button><br/>
	<br>
	<h5>Output</h5>
	<div id="output"></div>
	
</head>
<body>

<script type="text/javascript">  

function gen_output(ad_content){
  document.getElementById('output').innerHTML = ad_content;
}


function print(input) {
	if (input == undefined) {
		input = "";
	}

	gen_output(input);
}

function println(input) {
		if (input == undefined) {
			input = "";
		}

		print(input + "<br>");
	}

function thisButton(buttonElement){
  var buttonClickedId = buttonElement.id;
  var input = document.getElementById("userinput").value;
  if( buttonClickedId === 'generate' ){
    println(input);
	}
}
</script>

所以，如果我写： “你好1” “你好2” “你好3”

将打印为“Hello 1 Hello 2 Hello 3”insetad “你好1” “你好2” “你好3”

Answer 1

$('#doIt').click(function () {
    var encodedStr = $('#inputText').val().replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
       return '&#'+i.charCodeAt(0)+';';
    });
    $('#output').html(encodedStr.replace(/&/gim, '&amp;'));
});

code {
    display:block;
    padding: 4px;
    background-color: #EFEFEF;
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="inputText"></textarea>
<button id="doIt">do it</button>

<h3>result</h3>
<code id="output"></code>

http://jsfiddle.net/E3EqX/13/

尝试这个小提琴它将在javascript中编码html实体。

Answer 2

请输入<br>更改文本区域的值。我的意思是插入兼容的字符。

    <!DOCTYPE html>
    *<html lang="en">
    <head>
        <title>Minecraft Command Splitter by Jragon</title>
        <meta charset="utf-8">


    </head>
    <body>*


    <h2>Please input your commands.</h2>
    <textarea id="userinput" onChange="htmlFormat()" spellcheck="false" placeholder="Write your compacted commands here and the output will split them for you!"></textarea>
    <button id="generate" onclick="thisButton(this)">Generate</button><br/>
    <br>
    <h5>Output</h5>
    <div id="output"></div>

  <script type="text/javascript">  
function htmlFormat(){
  var text = document.getElementById("userinput").value;
  document.getElementById("userinput").value = text.replace(/\r?\n/g, '<br />');
}
function gen_output(ad_content){
  document.getElementById('output').innerHTML = ad_content;
}


function print(input) {
    if (input == undefined) {
        input = "";
    }

    gen_output(input);
}

function println(input) {
        if (input == undefined) {
            input = "";
        }

        print(input + "<br>");
    }

function thisButton(buttonElement){
  var buttonClickedId = buttonElement.id;
  var input = document.getElementById("userinput").value;
  if( buttonClickedId === 'generate' ){
    println(input);
    }
}
</script>

</body>
</html>

plnkr https://plnkr.co/edit/9Xv1vbHkZKvw5bSafZ7c?p=preview

如何在打印时考虑文本区域中的新行？

2 个答案: