Question

请帮我改变字符串：

<img src="hello.jpg" alt="^__^" width="100" height="76" />

到

<img src="hello.jpg" alt="^__^" width="200" height="150" />

使用正则表达式。

新信息::

我有一个产品项目，并在商店中有关此产品的不同变量的信息

    <tr>
        <td><img src="_tmp/gesan/benzin/G3000H.jpg" alt="G3000H" width="100" height="76" /></td>
        <td>G3000H</td>
        <td>2.2 kv</td>
        <td>2.75 ka</td>
        <td>3,6</td>
        <td>1,3</td>
        <td>39,7кг</td>
        <td>2000 rub</td>
    </tr>

当您将此元素悬停时，会在此javascript的帮助下显示新的PopUp菜单：

$("tr:gt(0)").hover(function(){
    $(this).css({'background-color':'#ccc'});
    $(this).each(function(){
        var itemImage = this.cells[0].innerHTML;itemImage2 = itemImage.replace(/(width=")\d+("\W+height=")\d+/, '$1200$2150');
        var itemName = this.cells[1].innerHTML;
        var itemPowerkVa = this.cells[2].innerHTML;
        var itemPowerKVt = this.cells[3].innerHTML;
        $("body").append("<div id='tip'><div id='tipWrap'>"+ itemImage2 +"<h4>"+ loadContainerArr[0]+" "+ itemName +"</h4><ul><li>"+ itemPowerkVa +"</li><li>" + itemPowerKVt +"</li></ul></div></div>");
    });
    tipItem  = $("#tip");
    tipItem.show(); //Show tooltip
},function() {
    tipItem.hide(); //Hide tooltip
    $(this).css('background-color','transparent');
    tipItem.remove();
})

我想在这种情况下最好使用RegEx，而不是创建一个新的Object

Answer 1

为什么要在这里使用正则表达式？

只需使用JS获取img元素并更改其CSS属性：

<img id="test" src="hello.jpg" alt="^__^" width="100" height="76" />


document.getElementById("test").style.width  = '200px';
document.getElementById("test").style.height = '150px';

始终使用正则表达式不是一个好的解决方案。就是这种情况之一。

编辑：

如果您使用jQuery，请将HTML字符串转换为对象：

var img = $('<img src="hello.jpg" alt="^__^" width="100" height="76" />');
img.attr('width', 200);
img.attr('height', 150);

Answer 2

如果你真的想使用正则表达式：

str.replace(/(width=")\d+("\W+height=")\d+/, '$1200$2150');

请注意，您的200和150属于“$ 1 200 $ 2 150 ”的一部分

但我会说其他评论说有更好的方法可以做到这一点。

Answer 3

看，那里：

模式：/(.\*)(width=\"[0-9]+\")(.\*)(height=\"76\")(.\*)/smUi

替换：$1width="200"$3height="150"$5

你可以在PHP中使用它：

preg_replace($pattern, $replacement, $data); // where the $data is the text with image

......或任何其他语言：）

Answer 4

我的方法是：

从头开始创建<div id='tip'>（并在最初隐藏它）并仅显示和隐藏它（不需要每次都创建和销毁它）：

<div id="tip" style="display:none">
    <div id="tipWrap">
        <img src="" alt="" width="200" height="150" />
        <h4></h4>
        <ul></ul>
    </div>
</div>

然后你可以这样做：

$("tr:gt(0)").hover(function(){
    $(this).css('background-color', '#ccc');
    var $tip = $('#tipWrap'),
        $tds = $(this).children(),
        $img = $(this).find('img'),
        itemName = $tds.eq(1).text(),
        itemPowerkVa = $tds.eq(2).text(),
        itemPowerKVt = $tds.eq(3).text();

    $tip.children('img').attr({
        src: $img.attr('src'),
        alt: $img.attr('alt')
    })
    .end().children('h4').text(loadContainerArr[0]+" "+ itemName)
    .end().children('ul').html("<li>"+ itemPowerkVa +"</li><li>" + itemPowerKVt +"</li>")
    .end().parent().show();
},function() {
    $('#tip').hide(); //Hide tooltip
    $(this).css('background-color','transparent');
});

更改宽度和高度RegEx javascript

4 个答案: