Question

所以这是我的情况，以及我提出的解决问题的解决方案。我创建了一个包含TinyMCE的应用程序，允许用户创建用于发布的HTML内容。用户可以在其标记中包含图像，并拖动/调整影响IMG标记中最终宽度/高度属性的图像。这一切都很棒，用户可以包含图像并将它们调整大小/重新定位到所需的外观。但是一个大问题是我现在向客户端发送一个（可能）更大的图像，只是让浏览器将图像调整为请求的宽度/高度属性。所有带宽和丢失的加载时间......

所以我的解决方案是预处理我的用户标记内容，扫描所有IMG标记并解析出Height / Width / Src属性。然后将每个img的SRC标记设置为phpThumb请求，并将解析后的Height / Width传递到缩略图URL。这将创建缩小尺寸的图像（以CPU和缓存为代价优化带宽）。您对此解决方案有何看法？我已经看过其他帖子，人们使用mod_rewrite做类似的事情，但我想影响页面服务上的内容，而不是在收到图片请求时操纵它们。 ....对这个设计的任何想法？

我需要一些精细细节方面的帮助，因为我的正则表达式技能需要一些工作，但我的时间很短，并承诺尽快支付我的技术知识债务。为了使正则表达式更容易，我可以肯定一些事情。只有需要此处理的img标签才会有现有的width =“”height =“”属性（使用双引号和较低的套接文本，但我认为如果TinyMCE更改，匹配文本不区分大小写会更好）

所以正则表达式只匹配必要的Img标签，也许还有另外三个正则表达式来提取src，宽度和高度？

谢谢大家。

Answer 1

我认为使用正则表达式是一个坏主意，你最好用PHP Simple HTML DOM Parser之类的东西解析它，然后你可以做类似的事情：

// Load HTML from a string
$html->load($your_posted_content);

// Find all images 
foreach($html->find('img') as $element) 
       echo $element->src . '<br>';

Answer 2

试试这个：

(?i)<img(?>\s+(?>src="([^"]*)"|width="([^"]*)"|height="([^"]*)"|\w+="[^"]*"))+

这将匹配任何图片代码，如果存在src，width和height属性，则其值将分别存储在组1,2和3中。但它不会要求任何这些属性，因此您需要在处理之前验证所有三个组是否包含值。

Answer 3

一般来说，RegEx is not good for HTML parsing ..但在你的情况下，如果限制范围非常狭窄（例如只搜索width=".."和{{1}，你就可以逃脱它属性..或类似的东西）。

更好的解决方案可能是异步传输TinyMCE中的内容，使用正确的HTML / XML解析器对服务器进行处理，然后在完成后更新编辑器的内容。

正则表达生成缩略图！？！？！（但这太疯狂了！）

3 个答案:

正则表达生成缩略图！？！？！ （但这太疯狂了！）

3 个答案:

正则表达生成缩略图！？！？！（但这太疯狂了！）