Question

我正在尝试找出一些我在一个方向上工作的正则表达式但在更改属性时失败。

我想要实现的是找到align的值并将此值替换为类

var s = '<img src="" align="left" class="smart" title="title for reference" />';
var reg = new RegExp(/(?:align="(.*?)").*?(?:class="(.*)")/);
console.log( s.replace(reg ,'class="image-$1 $2"') );

这很好用并输出

<img src="" class="image-left smart" title="title for reference" />

但是如果我改变html在对齐之前放置类我只是得到原始的html字符串

Answer 1

您可以使用jQuery来执行此操作。

var s = '<img src="" align="left" class="smart" title="title for reference" />';

$('<div/>').append(
    $(s).addClass('image-' + $(s).attr('align'))
        .removeAttr('align')
).html();

这样做的好处是不依赖于属性的特定排序等。当然，您可以将修改后的HTML添加到DOM树中，而不是使用$('<div/>')的技巧来获取html文本。

Answer 2

使用标记时，正则表达式臭名昭着不好，因为标记不规则。当您在浏览器中工作时，您已经拥有了一个强大的HTML解析器，因此使用正则表达式并不是您的最佳选择。

作为a'r suggests，这可以通过jQuery轻松完成。这是一个纯粹的DOM等价物：

var div = document.createElement("div");

div.innerHTML = s;

var img = div.firstChild;

img.className += " image-" + img.getAttribute("align");
img.removeAttribute("align");

console.log(div.innerHTML);

(Gecko DOM reference)

正则表达式属性替换

2 个答案: