JavaScript 字符串替换为一个棘手的正则表达式答案

【问题标题】：JavaScript String Replace with a tricky regular expressionJavaScript 字符串替换为一个棘手的正则表达式
【发布时间】：2010-03-22 17:23:59
【问题描述】：

我正在尝试找出更改此字符串所需的正则表达式

html = '<img style="width: 311px; height: 376px;" alt="test" src="/img/1268749322.jpg" />';

到这里

html = '<img width="311" height="376" alt="test" src="/img/1268749322.jpg" />';

在 Javascript.replace 的帮助下。

这是我的开始：

html = html.replace(/ style="width:\?([0-9])px*"/g, "width=\"$1\"");

谁能帮帮我？

谢谢

【问题讨论】：

尽可能在 DOM 上进行。正则表达式不适合处理 HTML。
您是否试图操纵特定标签？还是您想操纵所有同类标签？

标签： javascript regex string

【解决方案1】：

我是generally considered a Bad Thing to do HTML parsing with RegExs。

为什么不从 JavaScript 编辑 DOM？
我不是 CSS 专家，但使用样式不是比宽度/高度属性更好吗？
您忘记了: (\s*) 后面的空格。你不想要吗？因为它会错过 >1 个空格或一个制表符

【讨论】：

@Juri - 以防万一，链接是 StackOverflow 的两位创始人之一的博客。

【解决方案2】：

html = '<img style="width: 311px; height: 376px;" alt="test" src="/img/1268749322.jpg" />';
var d = document.createElement("div");
d.innerHTML = html;
var img = d.firstChild;
var width = parseInt(img.style.width, 10);
var height = parseInt(img.style.height, 10);
img.setAttribute("width", width);
img.setAttribute("height", height);
img.removeAttribute("style");

alert(d.innerHTML);

当然，如果你不以字符串开头，事情会变得稍微容易一些;-)

【讨论】：

它是由所见即所得编辑器提供的 HTML 代码

【解决方案3】：

Gumbo 是对的，你应该使用 DOM。

但是对于您的正则表达式：\?（问号）应该是什么意思？我会在那个位置插入\s*（任意数量的空格）。

【讨论】：

【解决方案4】：

是的，通常我会使用 DOM，但在这种特殊情况下，我需要解析来自 WYSIWYG 编辑器的 HTML 代码，它会过滤样式属性。一般来说，这很好，但对于图片，我想用这个 html.replace-Hack 保持设置的大小。

这就是答案：

html = html.replace(/ style=".*?width:\s?(\d+).*?height:\s?(\d+).*?"/g, " width=\"$1\" height=\"$2\"");

感谢您的帮助:-)

【讨论】：

【解决方案5】：

如果您愿意，我可以更详细地说明，请告诉我这是如何工作的：

html = html.replace(/style=".*?width:\s?(\d+).*?height:\s?(\d+).*?"/g, "width=\"$1\" height=\"$2\"");

编辑：转义qq

【讨论】：

就是这样，谢谢！ html = html.replace(/ style=".*?width:\s?(\d+).*?height:\s?(\d+).*?"/g, " width=\"$1\" 高度=\"$2\"");
谢谢 Juri，你喜欢它！