javascript - javascript .replace width标签

寻找有关javascript reg ex替换的帮助。我需要的是替换的所有实例

width="100">

用

style="width: 100px;"

但是实际的px值是可变的，这对我造成了问题。我知道reg表达是要走的路，但我不太了解。

这是一个类似的问题，但不能为我解决问题：
JavaScript Regex Replace Width Attribute Matching

这是一个问题的原因是由于TinyMce生成的HTML ...

最佳答案

两种选择：

使用正则表达式
解析HTML并使用DOM（首选）

使用正则表达式

该表达式非常简单：

str = str.replace(/\bwidth="(\d+)"/g, 'style="width: $1px"');

替换字符串中的$1用第一个捕获组的内容填充。

例：

var str = '<div width="100">Stuff here</div><div width="240">More stuff here</div>';
display("Before: '" + str + "'");
str = str.replace(/\bwidth="(\d+)"/g, 'style="width: $1px"');
display("After: '" + str + "'");

function display(msg) {
  document.body.insertAdjacentHTML(
    "beforeend",
    "<p>" +
    String(msg)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;") +
    "</p>"
  );
}

但是请注意，这将：

替换字符串中所有位置的width="nnn"，即使不在开始标记内
最后将第二个style属性添加到已经具有一个属性的标签中

如果可以的话，太好了；如果不是，则可能需要解析HTML，处理生成的解析后的DOM节点，然后再次对其进行序列化。

解析HTML并使用DOM

更好的选择是解析HTML并使用DOM。您已经说过HTML将用于div，因此我们不必担心独立表单元格之类的问题。

这是一个简单的解析和更新示例：

var str = '<div width="100">Stuff here</div><div width="240">More stuff here</div>';
var div = document.createElement('div');
div.innerHTML = str;
update(div.childNodes);
display("Before: '" + str + "'");
str = div.innerHTML;
display("After: '" + str + "'");

function update(nodes) {
  Array.prototype.forEach.call(nodes, function(node) {
    var width;
    if (node.nodeType === 1) { // An element
      width = node.getAttribute("width");
      if (width) {
        node.removeAttribute("width");
        node.style.width = width + "px";
      }
      update(node.childNodes);
    }
  });
}

function display(msg) {
  document.body.insertAdjacentHTML(
    "beforeend",
    "<p>" +
    String(msg)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;") +
    "</p>"
  );
}

html

javascript - javascript .replace width标签