Question

寻求javascript reg ex替换的帮助。我需要的是替换

的所有实例

width="100">

用

style="width: 100px;"

但是实际的px值是可变的，这对我来说是个问题。我知道reg表达是要走的路，但我不太明白。

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

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

Answer 1

两个选项：

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

使用正则表达式

表达式非常简单：

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

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

示例：

＆＃13;

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>"
  );
}

＆＃13;

但请注意：

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

如果那没关系，那很好;如果没有，您可能想要解析HTML，处理生成的解析DOM节点，然后再次序列化。

解析HTML并使用DOM

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

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

＆＃13;

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>"
  );
}

＆＃13;

Answer 2

我的第一个想法也是使用DOM而不是使用RegEx。我们可以只使用支持属性选择器的querySelector，而不是迭代所有元素。

var html = '<img src="//placehold.it/100x100" alt="" style="100px;">'+
           '<img src="//placehold.it/120x120" alt="" width="120" style="border: 2px solid steelblue;">'+
           '<img src="//placehold.it/140x140" alt="" width="140">',
    wrap = document.createElement('div'),
    nodes;

wrap.innerHTML = html;

nodes = wrap.querySelectorAll('[width]');

Array.prototype.forEach.call(nodes, function(el) {
    var width = el.getAttribute('width');
    if(width) {
        el.removeAttribute('width');
        el.style.width = width+'px';
    }
});

javascript .replace width tag

2 个答案:

使用正则表达式

解析HTML并使用DOM