前端显示文本时的格式设置

有时，前端页面文字内容需要按照我们输入的格式显示，比如，我们输入换行、空格，这些在文字显示时都需要显示出来。这里有一个较为简单的解决方式
前端显示界面：

代码：

<div class="btn-group" role="group" aria-label="..."
		style="margin-left: 900px">
		<button id="editText" type="button" class="btn btn-default">编辑内容</button>
		<button id="editImg" type="button" class="btn btn-default" >更新流程图</button>

	</div>
	<div class="container">
		<div class="col-md-10" style="margin-left:50px;margin-top:20px">
		     	<input type="hidden" id="contentInit">
		     	
				<div id="divText"></div>
              
    
	
				<div  id="Img" style = "margin-top:80px">
					<img id = "myImg" alt=""  style="height: 600px; width: 800px;" />
					<div id = "imgDescrible" style="margin-top:20px;margin-left:50px"> </div>
				</div>
				
		</div>
	</div>

编辑界面（模态框）：

代码如下：

	<!-- 模态框（Modal） -->
	<div class="modal fade" id="editModal" tabindex="0" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content" style = "width:800px">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel">编辑能源管理模式内容</h4>
				</div>
				<div autoHeight="true">
				<!--文本域，编辑文字内容-->
				   <textarea  id="textContent" style="width:100%;height:400px"> </textarea>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="update_btn" type="button" class="btn btn-primary"
						data-dismiss="modal">提交更改</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>

JS代码如下：
在前端显示的文字和文本域编辑的文字调用的接口不同：

//显示文字界面调用方法
function queryContentText(){
			$.ajax({
			   
				type:"post",
				url : "/hzsh/eomc-zzhj/nyglms/queryViewText",
				success : function(result) {
					$("#divText").append(result)
				}
			}) 
		}
//点击编辑内容，跳转到内容编辑页面可对能源管理模式内容进行编辑
		//触发模态框的同时调用此方法  
		$("#editText").click(function() {
		
			 $.ajax({
				
				type : "post",
				url : "/hzsh/eomc-zzhj/nyglms/queryEditText",
				success : function(result) {
				
					$("#textContent").text(result)
				}
			})  
			$("#editModal").modal('show');	
		})

后端controller接口：

@ResponseBody // 返回JSON
	@RequestMapping("/nyglms/queryViewText")
	public String queryNyglmsText() {
		EomcZzhjNyglmsEntity eomcZzhjNyglmsEntity = eomcZzhjNyglmsService.queryNyglmsText();

		String nyglmsText = eomcZzhjNyglmsEntity.getNyglmsText();
        return CIOUtil.convert2html(nyglmsText);
		
	}

	
	@ResponseBody // 返回JSON
	@RequestMapping("/nyglms/queryEditText")
	public String queryNyglmsEditText() {
		EomcZzhjNyglmsEntity eomcZzhjNyglmsEntity = eomcZzhjNyglmsService.queryNyglmsText();

		String nyglmsText = eomcZzhjNyglmsEntity.getNyglmsText();
        return nyglmsText;
		
	}

重点是 CIOUtil.convert2html(nyglmsText) 这个处理方法，对从数据库中查询出的文字格式进行处理，比如从数据库中查询的空格用前端可以识别的&nbsp替代，这样在前端就可以显示出空格了

public class CIOUtil {
      public static String convert2html(String content) {
		
		content = content.replaceAll(" "," ");
		content = content.replaceAll("<","&lt;");
		content = content.replaceAll(">","&gt;");
		content = content.replaceAll("\n","</p><p>");
		content = content.replaceAll("\"","&quot;");
		return "<h2><p>" + content + "</p></h2>";
	}
}

而从数据库查询出文字显示在textarea 文本编辑域时并不需要进行处理，提交时的文本格式不会发送改变