CODEWITHSUNDEEP
javascriptregex
Vladimir Lukyanov
Vladimir Lukyanov

Reputation: 374

Change width and height RegEx javascript

Please help me change string:

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

to

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

using regular expression.

New information::

I have a product item and in stores information about different variables for this product

    <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>

when you hover this element a new PopUp menu appear with help of this 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();
})

and i suppose in this situation it's better to use RegEx, than create a new Object

Upvotes: 1

Views: 4200

Answers (4)

Felix Kling
Felix Kling

Reputation: 816910

My approach would be:

Create the <div id='tip'> from the beginning (and hide it initially) and only show and hide it (no need to create and destroy it every time):

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

Then you can do:

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

Upvotes: 0

BCsongor
BCsongor

Reputation: 869

Look, there:

pattern: /(.\*)(width=\"[0-9]+\")(.\*)(height=\"76\")(.\*)/smUi

replacement: $1width="200"$3height="150"$5

U can use this with PHP:

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

... or any other language :)

Upvotes: 0

user578895
user578895

Reputation:

If you really want to use a regex:

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

Note that your 200 and 150 are part of "$1 200 $2 150"

But I'll 2nd the other comments that say there are better ways to do this.

Upvotes: 3

hsz
hsz

Reputation: 152286

Why you want to use regex here ?

Just grab that img element with JS and change its CSS properties:

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


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

Using regex all the time is not a good solution. It is one of that case.

Edit:

If you use jQuery, convert HTML string to an object:

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

Upvotes: 3

Related Questions