Изменить ширину и высоту регулярных выражений javascript

ProgramBox

Изменить ширину и высоту регулярных выражений javascript

Post author:admin
Запись опубликована:21 мая, 2023
Post category:Вопросы по программированию

#javascript #regex

#javascript #регулярное выражение

Вопрос:

Пожалуйста, помогите мне изменить строку:

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

и я полагаю, что в этой ситуации лучше использовать регулярное выражение, чем создавать новый объект

1. Почему регулярное выражение? Поскольку вы находитесь на стороне клиента, почему бы просто не использовать jQuery или что-то в этомроде?

2. Пожалуйста, добавьте еще немного информации. Дополнительная информация => лучшие ответы.

3. Феликс Клинг — добавлена новая информация (спасибо за ответ)

Ответ №1:

Если вы действительно хотите использовать регулярное выражение:

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

Обратите внимание, что ваши 200 и 150 являются частью «1 200 долларов США 2 150 долларов США»

Но я приведу 2-е другие комментарии, в которых говорится, что есть лучшие способы сделать это.

Ответ №2:

Почему вы хотите использовать regex здесь?

Просто возьмите этот img элемент с помощью JS и измените его свойства 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);

1. Чувак, ты видишь — я получаю строку, а не объект -> вот почему мне нужно регулярное выражение

2. Используете ли вы jQuery / mooTools /etc?

3. hsz , чувак, спасибо тебе за твой ответ. Ваш ответ очень хорош, но мне все еще нужно получить регулярное выражение. Я дважды подумал и предположил, что создание нового объекта jQuery из строки медленнее с точки зрения производительности, чем получение регулярного выражения и замена 2 переменных. Я не психопат по поводу производительности, но всегда лучше сделать 1 что-то хорошее, чем несколько плохих.

4. @Vovan: Это может быть неизмеримо медленнее, но это правильный способ сделать это. Что вы вообще делаете со строкой? Вставить это в DOM? К сожалению, вы, похоже, не хотите предоставлять больше информации, поэтому мы не можем помочь вам лучше.

Ответ №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

… или на любом другом языке 🙂

Ответ №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');
});