PHP 转换HTML 为节点数组 ,可用于uni-app的rich-text渲染

1 篇文章 0 订阅

在Web开发中,HTML文档的结构和内容往往需要通过编程方式进行操作和解析。PHP DOMDocument类是一个强大的工具,可以将HTML转换为可操作的对象结构,本文将介绍一下使用PHP的DOMDocument类将HTML转换为节点数组的过程。htmlToNodes函数将HTML字符串作为输入,并返回一个包含HTML文档结构的嵌套数组。通过这个函数,可以便捷地处理HTML内容,无论是进行网页爬虫、内容管理还是构建复杂的Web应用程序,都能大大提高开发效率和灵活性。

function htmlToNodes($html) {

	$html = "<body><div>".$html."</div></body>";

    $dom = new DOMDocument();
	libxml_use_internal_errors(true); // 禁用错误报告
    @$dom->loadHTML('<?xml encoding="UTF-8">' . $html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
	 libxml_clear_errors(); // 清除错误

	$nodes = [];


	function parseNode($node) {
		global $nodes;
		
		$item = [
			'name' => $node->nodeName,
		];
		if ($node->hasAttributes()) {
			$attrs = [];
			foreach ($node->attributes as $attr) {
				$attrs[$attr->nodeName] = $attr->nodeValue;
			}
			$item['attrs'] = $attrs;
		}
		
		if ($node->hasChildNodes()) {
			$children = [];
			foreach ($node->childNodes as $child) {
				if ($child->nodeType === XML_TEXT_NODE) {
					$children[] = [
						'type' => 'text',
						'text' => $child->wholeText,
					];
				} else {
					$children[] = parseNode($child);
				}
			}
			$item['children'] = $children;
		}
		
		return $item;
	}

	foreach ($dom->getElementsByTagName('body')->item(0)->childNodes as $child) {
		$nodes[] = parseNode($child);
	}
	return $nodes;

}

通过将HTML转换为节点数组,可以轻松地遍历这些内容,对其进行定制化的渲染和处理。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Uni-request是一个基于Promise的网络请求库,适用于uni-app和小程序开发。如果想在uni-app中使用uni-request,需要先进行以下步骤: 1. 在HBuilderX中创建一个uni-app项目 2. 打开命令行工具,使用npm命令安装uni-request: ``` npm install uni-request ``` 3. 在需要发送网络请求的页面或组件中引入uni-request: ``` import request from '@/common/request.js' ``` 4. 在request.js文件中编写自己的请求方法,例如: ``` import { BASE_URL } from './config.js' import Request from 'uni-request' const request = new Request() request.interceptors.request.use(config => { config.baseUrl = BASE_URL return config }) export default request ``` 在这个示例中,我们将BASE_URL定义在config.js文件中,并通过拦截器将其添加到请求的baseUrl中。这样,我们就可以在发送请求时直接使用相对路径,而不需要每次都写全路径。 5. 在页面或组件中使用request发送网络请求,例如: ``` import request from '@/common/request.js' request.get('/api/user/info').then(res => { console.log(res.data) }) ``` 在这个示例中,我们通过request发送了一个GET请求,请求地址为"/api/user/info"。请求成功后,我们打印出了返回的数据。 注意:在使用uni-request发送网络请求时,需要在manifest.json文件中配置网络权限。可以在manifest.json文件中的"app-plus"-"permissions"节点中添加以下权限: ``` "app-plus": { "permissions": { "network": { "description": "用于发送网络请求" } } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值