javascript - 如何将节点内容从 xml 复制到硬编码的 html(动态到原始 html)？

Question

我有大约 150 页 html，每个页面上有 4 个 div，具有类似的投资组合项目...我目前通过 jQuery 加载这些项目的内容，在每个项目 div 上使用自定义数据属性。我正在尝试使用 php 或 jquery 使此动态数据静态化，以便内容硬编码到每个页面的 html 中......该网站采用 html 格式，而不是 wordpress/php ...

代码如下:

var xmlData = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?><items xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><item><p_id>1_1</p_id><p_title>Sparrow</p_title><p_img>http://placehold.it/50x50/484848/FFFFFF&text=Sparrow</p_img><p_url>1_sparrow.html</p_url></item><item><p_id>1_2</p_id><p_title>Eagle</p_title><p_img>http://placehold.it/50x50/484848/FFFFFF&text=Eagle</p_img><p_url>1_eagle.html</p_url></item><item><p_id>1_3</p_id><p_title>Hen</p_title><p_img>http://placehold.it/50x50/484848/FFFFFF&text=Hen</p_img><p_url>1_hen.html</p_url></item><item><p_id>2_1</p_id><p_title>Green</p_title><p_img>http://placehold.it/50x50/484848/FFFFFF&text=Green</p_img><p_url>2_green.html</p_url></item><item><p_id>2_2</p_id><p_title>Blue</p_title><p_img>http://placehold.it/50x50/484848/FFFFFF&text=Blue</p_img><p_url>2_blue.html</p_url></item><item><p_id>2_3</p_id><p_title>Pink</p_title><p_img>http://placehold.it/50x50/484848/FFFFFF&text=Pink</p_img><p_url>2_pink.html</p_url></item><item><p_id>2_4</p_id><p_title>Purple</p_title><p_img>http://placehold.it/50x50/484848/FFFFFF&text=Purple</p_img><p_url>2_purple.html</p_url></item></items>';

$(document).ready(function(){
    parse(xmlData);
});


function parse(xmlResponse){
	
	$(xmlResponse).find("item").each(function() {
		var pr_id = $(this).find("p_id").text();
		var p_title = $(this).find("p_title").text();
		var p_img = $(this).find("p_img").text();
		var p_url = $(this).find("p_url").text();
		
		$("a[data-prd_id='" + pr_id + "']").attr('href', p_url);
		$("a[data-prd_id='" + pr_id + "'] img").attr('src', p_img);
		$("a[data-prd_id='" + pr_id + "'] h2").text(p_title);
		});
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<div class="item">
<a class="item-anchor" data-prd_id="1_2" href="#">
<img class="image" src="../images/loading.png">
<h2 class="title">Loading...</h2>
</a>
</div>

<div class="item">
<a class="item-anchor" data-prd_id="2_2" href="#">
<img class="image" src="../images/loading.png">
<h2 class="title">Loading...</h2>
</a>
</div>

<div class="item">
<a class="item-anchor" data-prd_id="1_3" href="#">
<img class="image" src="../images/loading.png">
<h2 class="title">Loading...</h2>
</a>
</div>

<div class="item">
<a class="item-anchor" data-prd_id="2_4" href="#">
<img class="image" src="../images/loading.png">
<h2 class="title">Loading...</h2>
</a>
</div>
    
</div>

::: JSfiddle :::

我了解 Simple PHP HTML DOM，并且已经使用它很多次将数据复制到 html 文件。这是我使用过的脚本文件夹中的示例代码。在此示例中，我将包含内容的 html 文件放置在 xampp 的/content 文件夹中，并且放置字符串 (_Item__Features__Content__HERE_) 的文件是具有相同内容的 html 文件。名称而不是实际的网站页面，并保存在/website_files_html 文件夹中。最后，替换字符串后，新版本的html文件将保存在/extracted_html文件夹中...

include('simple_html_dom.php');

$destdir = "extracted_html";
$oldMessage = "_Item__Features__Content__HERE_";


$website_files_html_dir = "website_files_html";

$dir = new DirectoryIterator("content_html");
foreach ($dir as $fileinfo)
        {
    if (!$fileinfo->isDot())
                {
                $file_name = basename($fileinfo);
                $html = file_get_html("content_html/$file_name");
                foreach($html->find('div[class=item_features]') as $e)
                        {
                        $str=file_get_contents("$website_files_html_dir/$file_name");
                        $str=str_replace($oldMessage, $e->innertext,$str);
                        file_put_contents("$destdir/$file_name", $str);
                        echo $file_name . " <b>Done!</b> </br>";
                        }
                }

        }

所以我的请求是:如何修改这段代码，让我将各自的xml内容放置在每个“item”div的属性(href、img-src、title)中，并将结果作为提取的文件夹中的html文件输出？

感谢您的帮助。

Answer 1

嗯，我明白了!必须搜索 XML 解析器。这是代码。

<?php
include('simple_html_dom.php');

$destdir = "extracted_html";

$dir = new DirectoryIterator("content_html");
foreach ($dir as $fileinfo)
        {
    if (!$fileinfo->isDot())
                {
                $file_name = basename($fileinfo);
                $html = file_get_html("content_html/$file_name", NULL, NULL, NULL, NULL, NULL, NULL, NULL, false, NULL, NULL);              
                foreach($html->find('a[class=w-portfolio-item-anchor]') as $e)
                        {
                        $product_this_arr = array();
                        $data_id = $e->data_prd_id;
                        //echo $data_id . '<br>';
                        $product_this_arr = get_xml_data($data_id);

                        $e->href = $product_this_arr[0];
                        $e->find('img', 0)->src = $product_this_arr[1];
                        $e->find('h2', 0)->innertext = $product_this_arr[2];

                        $e->data_prd_id = "__attribute_Nulled_";

                        }
                        file_put_contents("$destdir/$file_name", $html);
                        echo $file_name . " <b>Done!</b> </br>";
                }
        }

    // XML PARSER...
    function get_xml_data($xml_id_i){
    $product_xml = simplexml_load_file('xml/XML_products_info.xml');
        $product_each_arr = array();
       foreach ($product_xml as $product_each){
        if($product_each->product_id == $xml_id_i){
         $product_each_arr[0] = $product_each->product_url;
         $product_each_arr[1] = $product_each->product_img;
         $product_each_arr[2] = $product_each->product_title;
        }
       }
    return $product_each_arr;
    }

?>