0

我目前正在通过 ajax 将 XML 提要拉入 webapp。显然我喜欢使用 jquery 来解析它，就像这样：

$(source).find("item");

这样做的问题是所有内容都转换为节点，包括-tags。考虑到这是某种 RSS 提要，提要包含完整的文章（包括图片库），因此有许多 img-tags。为了防止这种情况，我想尝试将 img-tags 转换为如下内容：

前：

<img src="path_to_img.jpg" width="450" height="199" alt="alt description" title="image title" class="image_classes" />

后：

<image>
<src>path_to_img.jpg</src>
<alt>alt description</alt>
<title>image title</title>
<class>image_classes</class>
</image>

如果有人有比使用正则表达式更好的建议，当然也欢迎。但是因为它们都必须像文本一样对待，我担心很少，考虑到图像在添加到 DOM 时开始预加载。

4

3 回答 3

0

这是前两个属性 src 和 alt 的示例：

HTMLstring.replace(new RegExp("<img src=\"([^\"]+)\".*alt=\"([^\"]+)\"","gm"), "<image><src>$1</src><alt>$2</alt></image>")

如果您预见到某些属性可能会丢失，您可以使用|运算符来管理所有替代方案，或者可能采用混合方法，从标签中提取一组键值对，img然后将它们与一些 js 连接在一起：

    $.each(HTMLstring.replace(/<img ([^ =]+)="([^"]+).*\/>/), function () {
        <do_what_you_need_with($1, $2)>
    });
于 2012-06-21T09:00:14.023 回答
0

好吧，除非您可以保证所有这些属性将始终存在，并且始终在带引号的字符串等中，否则这不会很容易。

var html = '<img src="path_to_img.jpg" width="450" height="199" alt="alt description" title="image title" class="image_classes" />';
var regex = /<img .*?(src|alt|title|class)="([^"]*)" .*?(src|alt|title|class)="([^"]*)" .*?(src|alt|title|class)="([^"]*)" .*?(src|alt|title|class)="([^"]*)".*?\/?>/g;
var xmlTemplate = '<image><$1>$2</$1><$3>$4</$3><$5>$6</$5><$7>$8</$7></image>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​';
var xml = html.replace(regex, xmlTemplate);

如果您的源 HTML 不是统一的，那么您可能必须使用.replace(regex, func)而不是.replace(regex, string).

正如您所说的 alt 属性可能不存在，那么您将需要将正则表达式与函数一起使用，如下所示：

var html = '<img src="path_to_img.jpg" width="450" height="199" alt="alt description" title="image title" class="image_classes" />';
var regex = /<img .*?>/gi;
function getAttributeValue(tag, attribute)
{
    var regex = new RegExp('\\b' + attribute + '="([^"]*)"', 'i');
    var match = tag.match(regex);
    return '\t<' + attribute + '>' + (match ? match[1] : '') + '</' + attribute + '>\n';
}

var xml = html.replace(regex, function($0)
{
    var xml = '<image>\n';
    xml += getAttributeValue($0, 'src');
    xml += getAttributeValue($0, 'alt');
    xml += getAttributeValue($0, 'title');
    xml += getAttributeValue($0, 'class');
    xml += '</image>';
    return xml;
});
于 2012-06-21T09:10:09.837 回答
0

如果您不介意 alt 标记完全从 xml 中排除（如果 html 中不存在），那么您可以使用以下命令：

var regex = /\s+(src|alt|title|class)\s*=\s*"([^"]+)"/gi;
var res;
var xml = '<image>\n';
while ((res = regex.exec(html)) !== null) {
    xml += "\t<" + res[1] + ">" + res[2] + "</" + res[1] + ">\n";
}
xml += "</image>";
于 2012-06-21T10:30:47.320 回答