Gan*_*abu 17 html javascript php jquery json
我可以使用JsontoHtml库将JSON转换为HTML .现在,我需要将当前HTML转换为JSON,如此站点所示.查看代码时,我发现了以下脚本:
<script>
$(function(){
//HTML to JSON
$('#btn-render-json').click(function() {
//Set html output
$('#html-output').html( $('#html-input').val() );
//Process to JSON and format it for consumption
$('#html-json').html( FormatJSON(toTransform($('#html-output').children())) );
});
});
//Convert obj or array to transform
function toTransform(obj) {
var json;
if( obj.length > 1 )
{
json = [];
for(var i = 0; i < obj.length; i++)
json[json.length++] = ObjToTransform(obj[i]);
} else
json = ObjToTransform(obj);
return(json);
}
//Convert obj to transform
function ObjToTransform(obj)
{
//Get the DOM element
var el = $(obj).get(0);
//Add the tag element
var json = {'tag':el.nodeName.toLowerCase()};
for (var attr, i=0, attrs=el.attributes, l=attrs.length; i<l; i++){
attr = attrs[i];
json[attr.nodeName] = attr.value;
}
var children = $(obj).children();
if( children.length > 0 ) json['children'] = [];
else json['html'] = $(obj).text();
//Add the children
for(var c = 0; c < children.length; c++)
json['children'][json['children'].length++] = toTransform(children[c]);
return(json);
}
//Format JSON (with indents)
function FormatJSON(oData, sIndent) {
if (arguments.length < 2) {
var sIndent = "";
}
var sIndentStyle = " ";
var sDataType = RealTypeOf(oData);
// open object
if (sDataType == "array") {
if (oData.length == 0) {
return "[]";
}
var sHTML = "[";
} else {
var iCount = 0;
$.each(oData, function() {
iCount++;
return;
});
if (iCount == 0) { // object is empty
return "{}";
}
var sHTML = "{";
}
// loop through items
var iCount = 0;
$.each(oData, function(sKey, vValue) {
if (iCount > 0) {
sHTML += ",";
}
if (sDataType == "array") {
sHTML += ("\n" + sIndent + sIndentStyle);
} else {
sHTML += ("\"" + sKey + "\"" + ":");
}
// display relevant data type
switch (RealTypeOf(vValue)) {
case "array":
case "object":
sHTML += FormatJSON(vValue, (sIndent + sIndentStyle));
break;
case "boolean":
case "number":
sHTML += vValue.toString();
break;
case "null":
sHTML += "null";
break;
case "string":
sHTML += ("\"" + vValue + "\"");
break;
default:
sHTML += ("TYPEOF: " + typeof(vValue));
}
// loop
iCount++;
});
// close object
if (sDataType == "array") {
sHTML += ("\n" + sIndent + "]");
} else {
sHTML += ("}");
}
// return
return sHTML;
}
//Get the type of the obj (can replace by jquery type)
function RealTypeOf(v) {
if (typeof(v) == "object") {
if (v === null) return "null";
if (v.constructor == (new Array).constructor) return "array";
if (v.constructor == (new Date).constructor) return "date";
if (v.constructor == (new RegExp).constructor) return "regex";
return "object";
}
return typeof(v);
}
</script>
Run Code Online (Sandbox Code Playgroud)

现在,我需要在PHP中使用以下函数.我可以获取HTML数据.我现在需要的只是将JavaScript函数转换为PHP函数.这可能吗?我的主要疑虑如下:
Javascript函数的主要输入toTransform()是一个对象.是否可以通过PHP将HTML转换为对象?
PHP中是否提供了此特定JavaScript中的所有函数?
请建议我这个想法.
当我尝试根据给出的答案将脚本标记转换为json时,我会收到错误.当我在json2html网站上尝试它时,它显示如下:
..如何实现相同的解决方案?
sco*_*ozy 27
如果您能够获得DOMDocument表示HTML 的对象,那么您只需要递归遍历它并构建所需的数据结构.
将HTML文档转换为a DOMDocument应该像这样简单:
function html_to_obj($html) {
$dom = new DOMDocument();
$dom->loadHTML($html);
return element_to_obj($dom->documentElement);
}
Run Code Online (Sandbox Code Playgroud)
然后,一个简单的遍历$dom->documentElement给出你描述的结构类型可能如下所示:
function element_to_obj($element) {
$obj = array( "tag" => $element->tagName );
foreach ($element->attributes as $attribute) {
$obj[$attribute->name] = $attribute->value;
}
foreach ($element->childNodes as $subElement) {
if ($subElement->nodeType == XML_TEXT_NODE) {
$obj["html"] = $subElement->wholeText;
}
else {
$obj["children"][] = element_to_obj($subElement);
}
}
return $obj;
}
Run Code Online (Sandbox Code Playgroud)
测试用例
$html = <<<EOF
<!DOCTYPE html>
<html lang="en">
<head>
<title> This is a test </title>
</head>
<body>
<h1> Is this working? </h1>
<ul>
<li> Yes </li>
<li> No </li>
</ul>
</body>
</html>
EOF;
header("Content-Type: text/plain");
echo json_encode(html_to_obj($html), JSON_PRETTY_PRINT);
Run Code Online (Sandbox Code Playgroud)
产量
{
"tag": "html",
"lang": "en",
"children": [
{
"tag": "head",
"children": [
{
"tag": "title",
"html": " This is a test "
}
]
},
{
"tag": "body",
"html": " \n ",
"children": [
{
"tag": "h1",
"html": " Is this working? "
},
{
"tag": "ul",
"children": [
{
"tag": "li",
"html": " Yes "
},
{
"tag": "li",
"html": " No "
}
],
"html": "\n "
}
]
}
]
}
Run Code Online (Sandbox Code Playgroud)
回答更新的问题
上面提出的解决方案不适用于该<script>元素,因为它不是作为对象解析DOMText,而是作为DOMCharacterData对象解析.这是因为PHP中的DOM扩展基于libxml2,它将HTML解析为HTML 4.0,而在HTML 4.0中,内容<script>属于类型CDATA而不是#PCDATA.
您有两个解决此问题的方法.
简单但不是非常强大的解决方案是将LIBXML_NOCDATA标志添加到DOMDocument::loadHTML.(我实际上并不是100%确定这是否适用于HTML解析器.)
更困难的是,在我看来,更好的解决方案是$subElement->nodeType在递归之前进行测试时添加额外的测试.递归函数将变为:
function element_to_obj($element) {
echo $element->tagName, "\n";
$obj = array( "tag" => $element->tagName );
foreach ($element->attributes as $attribute) {
$obj[$attribute->name] = $attribute->value;
}
foreach ($element->childNodes as $subElement) {
if ($subElement->nodeType == XML_TEXT_NODE) {
$obj["html"] = $subElement->wholeText;
}
elseif ($subElement->nodeType == XML_CDATA_SECTION_NODE) {
$obj["html"] = $subElement->data;
}
else {
$obj["children"][] = element_to_obj($subElement);
}
}
return $obj;
}
Run Code Online (Sandbox Code Playgroud)
如果你遇到了这种类型的另一个bug,你应该做的第一件事是检查节点的类型$subElement,因为我的短示例函数没有处理许多其他可能性.
此外,您会注意到libxml2必须修复HTML中的错误才能为其构建DOM.这就是即使您没有指定它们也会出现<html>a和<head>元素的原因.你可以通过使用LIBXML_HTML_NOIMPLIED标志来避免这种情况.
用脚本测试用例
$html = <<<EOF
<script type="text/javascript">
alert('hi');
</script>
EOF;
header("Content-Type: text/plain");
echo json_encode(html_to_obj($html), JSON_PRETTY_PRINT);
Run Code Online (Sandbox Code Playgroud)
产量
{
"tag": "html",
"children": [
{
"tag": "head",
"children": [
{
"tag": "script",
"type": "text\/javascript",
"html": "\n alert('hi');\n "
}
]
}
]
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
36925 次 |
| 最近记录: |