简体   繁体   English

如何在HTML代码字符串中检测文件路径

[英]How to detect file path in a string of html codes

I need to read in a string of HTML codes using ajax and refactor every file path found in the string. 我需要使用ajax读取一串HTML代码,并重构在该字符串中找到的每个文件路径。

For example: 例如:

I need to detect "../../images/home.jpg" And change it to "http://www.mywebsite.com/report/images/home.jpg". 我需要检测“ ../../images/home.jpg”并将其更改为“ http://www.mywebsite.com/report/images/home.jpg”。

I am actually doing a dashboard. 我实际上正在做一个仪表板。 Using iframe to display content in a dashboard cost me performance. 使用iframe在仪表板上显示内容会降低我的性能。 In order to not use iframe, I intend to read in the string of html codes of the targeted URL. 为了不使用iframe,我打算读入目标URL的html代码字符串。 But the only factor here is that if the filepath of any images, javascript or css are not absolute path, my dashboard will not be able to display. 但是这里唯一的因素是,如果任何图像,javascript或css的文件路径都不是绝对路径,则我的仪表板将无法显示。

Please give your thoughts in how you would detect file path within a string of html codes or is there any existing library that you know of. 请考虑一下如何检测html代码字符串中的文件路径,或者是否有已知的现有库。

Here is one of a simple html codes i am reading from. 这是我正在阅读的简单html代码之一。

<!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 id="Head1"><title>
    Web Report: Customer Complains
</title><link rel="stylesheet" type="text/css" href="../../../css/Concept1.css" /></head>
<style type="text/css">

</style>
<body>
        <div class="SectionTitleContainer1">
            <div style="text-align: left;" class="SectionTitle">
                Customer Complaints
            </div>
        </div>
    <table cellspacing="0" cellpadding="5" style="width: 100%;" border="0">

        <tr>
            <td width="1%" align="left">
                <a>
                Refund 

                    </a>
            </td>
            <td width="1%" style="text-align: right">139</td>
            <td align="left" style="">
                <img src="../../../images/tile-horiz-bar.png" style="height: 10px; width: 100px" />
            </td>
        </tr>

        <tr>
            <td width="1%" align="left">
                <a>
                Appointment Rescheduled/Delayed 

                    </a>
            </td>
            <td width="1%" style="text-align: right">96</td>
            <td align="left" style="">
                <img src="../../../images/tile-horiz-bar.png" style="height: 10px; width: 69px" />
            </td>
        </tr>                
    </table>
    </body>
</html>

After a long period of discovery, I learned that if there is a need for two different system to display identical UI, we should place the image files (or any other script files) in a common directory within a server. 经过长时间的发现,我了解到,如果需要两个不同的系统来显示相同​​的UI,我们应该将图像文件(或任何其他脚本文件)放置在服务器内的公共目录中。 Web app should be given proper permission to access the files in the local directory of the server. 应该授予Web应用适当的权限,以访问服务器本地目录中的文件。 The directory holding the image files should not be secured and not exposing to the public (if necessary). 包含图像文件的目录不应受到保护,也不应公开(如有必要)。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM