改变宽度和高度RegEx javascript

Change width and height RegEx javascript

本文关键字：RegEx javascript 高度 改变      更新时间：2023-09-26

请帮我更改字符串:

<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的帮助下:

$("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，而不是创建一个新的对象

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

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

请注意，您的200和150是"$1 200 $2 150"的一部分

但是我将引用其他的评论，说有更好的方法来做到这一点

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

用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);

看，那里:

pattern: /(.'*)(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

…或任何其他语言:)

我的方法是:

从一开始创建<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');
});
相关文章：