js + php 处理 永远的敌人 特殊符号 1 在网页上的显示问题 分类： php javascript js 特殊符号 html实体显示 html 2014-03-27 17:55 350人阅读 评论(0) 收藏

php传值给js，然后js将数据显示在网页上，如果存在特殊字符如：' 半角单引号，" 半角双引号，或者和html实体符号相关的 & 就会出现各种显示上的问题

php部分先将这些特殊的字符转义

<?php
function arrayRecursive(&$array){  
    foreach ($array as $key => $value) {  
        if (is_array($value)) {  
            arrayRecursive($array[$key]);//如果是数组就进行递归操作  
        } else {  
            if(is_string($value)){  
                $temp1= addslashes($value);
                $array[$key]= urlencode($temp1);//如果是字符串就urlencode  
            }else{  
                $array[$key] = $value;  
            }  
        }  
    }  
}  
function JSON($result) {  
    $array=$result;  
    arrayRecursive($array);//先将类型为字符串的数据进行 urlencode  
    $json = json_encode($array);//再将数组转成JSON  
    return urldecode($json);//最后将JSON字符串进行urldecode  
}
$data = '"+123+'."'+&amp;+&quot;+<span class=\"new\">+&123";
// $data = '<script>var a=1;</script>';


$arr_data = Array(
    'data' => Array(
        '1'=>$data,
        '2'=>$data,
        '3'=> Array(
            '123'=>'123',
            '123'=>'123',
            '123'=>'123'
        )
    )
);

function arrayRecursive2(&$array){
    $search = array (
        "'&'i",//转换and符号
        "'\"'i",//转换半角双引号
        "'\''i",//转换半角单引号
        "'<'i",//转换小于号
        "'>'i"//转换大于号
    );
    $replace = array (
        "&amp;",
        "&quot;",
        "&#39;",
        "&lt;",
        "&gt;"
    );
    foreach ($array as $key => $value) {  
        if (is_array($value)) {  
            arrayRecursive2($array[$key]);//如果是数组就进行递归操作  
        } else {  
            if(is_string($value)){  
                $array[$key] = preg_replace($search, $replace, $value);
            }else{  
                $array[$key] = $value;  
            }  
        }  
    }  
} 
function replace_html_entity($result){
    $origin = $result;
    arrayRecursive2($origin);
    return $origin;
}

$encode_array = replace_html_entity($arr_data);

echo JSON($encode_array);
?>


接着是js接受和html显示，以及div，span，input，textarea等相互转换显示的时候的问题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>无标题文档</title>
</head>

<body>
<div id="J_div1"></div>
<span id="J_span1"></span>
<input type="text" id="J_input" value="" autocomplete="off" name="J_input" />
<textarea cols="60" rows="4" id="J_textarea" value="" autocomplete="off" name="J_textarea"></textarea>
<input type="hidden" id="J_hidden" value="" name="J_hidden"  />
<div id="J_div3"></div>
<span id="J_span3"></span>
<input type="text" id="J_input2" value="" autocomplete="off" name="J_input2" />
<textarea cols="60" rows="4" id="J_textarea2" value="" autocomplete="off" name="J_textarea2"></textarea>
<input type="hidden" id="J_hidden2" value="" name="J_hidden2"  />
</body>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function change_to_html_entity(string){
    string=string.replace(/&/g,"&amp;");
    string=string.replace(/"/g,"&quot;");
    string=string.replace(/'/g,"&#39;");
    string=string.replace(/</g,"&lt;");
    string=string.replace(/>/g,"&gt;");
    return string;
}
function change_to_origin(string){
    string=string.replace(/&quot;/g,'"');
    string=string.replace(/&#39;/g,"'");
    string=string.replace(/&lt;/g,"<");
    string=string.replace(/&gt;/g,">");
    string=string.replace(/&amp;/g,"&");
    return string;
}
var string1,string2;
var div_tpl = '<div id="J_div2">{word}</div>';
var span_tpl = '<span id="J_span2">{word}</span>';
$.ajax({
	type: "POST",
	url: "getdata3.php",
	dataType:"JSON",
	success:function(data){
		string1 = data.data[1];
		string2 = change_to_origin(string1);
		$('#J_div1').html(string1);
		$('#J_span1').html(string1);
		$('#J_input').val(string2);
		$('#J_textarea').val(string2);
		$('#J_hidden').val(string2);
		$('body').append(div_tpl.replace('{word}',string1));
		$('body').append(span_tpl.replace('{word}',string1));
		$('#J_div3').text($('#J_hidden').val());
		$('#J_span3').text($('#J_hidden').val());
		$('#J_input2').val($('#J_div3').text());
		$('#J_textarea2').val($('#J_span3').text());
		$('#J_hidden2').val($('#J_span3').text());
	}
});
</script>
</html>


至于从这些div，span，input，textarea中取出，通过js传给php时候的问题，在后一篇文章中。。。

版权声明：本文为博主原创文章，未经博主允许不得转载。

posted @ 2014-03-27 17:55  snow_finland  阅读(240)  评论(0)    收藏  举报