Форум

Tipylja · #1 (**permalink**) 13.03.2018, 16:42

Здравствуйте. Подскажите пожалуйста. Есть множество карточек товаров, в них есть таблица, в которой есть значения. Допустим:

<table class="table product__table">
                            <tr class="table__row">
                                <td class="table__cell">Мощность бензинового двигателя</td>
                                <td class="table__cell">2800 W или 3,9 л.с.</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Обороты</td>
                                <td class="table__cell">8800 в мин.</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Шина</td>
                                <td class="table__cell">45 см (450 мм)</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Цепной шаг</td>
                                <td class="table__cell">0.325 дюйма</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Объем двигателя внутреннего сгорания</td>
                                <td class="table__cell">52 см³</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Объем бака для топлива</td>
                                <td class="table__cell">680 мл</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Объем бака для масла</td>
                                <td class="table__cell">350 мл</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Масляный насос</td>
                                <td class="table__cell">Автомат</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Рекомендованное топливо</td>
                                <td class="table__cell">Бензин АИ-92</td>
                            </tr>
                            


                        </table>

Необходимо все цифры обвернуть в span с классом, для декорирования. Не подскажите как это можно сделать?
А совсем бы хорошо было если бы так же оборачивались цифр и примыкающие буквы, если такие есть, что имею ввиду - допустим есть значение "Бензин АИ-92", то вот "АИ-92" тоже хотелось бы обвернуть, то есть грубо говоря, слово, в котором есть цифры. Понимаю, что такое лучше повесить на пхп, нежели грузить браузер клиенту, но все же хотелось бы временно решить это на js или jq

рони · #2 (**permalink**) 13.03.2018, 17:06

Tipylja,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .table__cell .red{
      background-color: #FF0000;
      color: #FFFFFF;
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
$(".table__cell").html(function(i, html) {
   return  html.replace(/([^\s()]*\d[^\s()]*)/g, "<span class='red'>$1</span>")
})
});
  </script>
</head>

<body>
<table class="table product__table">
                            <tr class="table__row">
                                <td class="table__cell">Мощность бензинового двигателя</td>
                                <td class="table__cell">2800 W или 3,9 л.с.</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Обороты</td>
                                <td class="table__cell">8800 в мин.</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Шина</td>
                                <td class="table__cell">45 см (450 мм)</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Цепной шаг</td>
                                <td class="table__cell">0.325 дюйма</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Объем двигателя внутреннего сгорания</td>
                                <td class="table__cell">52 см³</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Объем бака для топлива</td>
                                <td class="table__cell">680 мл</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Объем бака для масла</td>
                                <td class="table__cell">350 мл</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Масляный насос</td>
                                <td class="table__cell">Автомат</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Рекомендованное топливо</td>
                                <td class="table__cell">Бензин АИ-92</td>
                            </tr>



                        </table>

</body>
</html>

Nexus · #3 (**permalink**) 13.03.2018, 17:18

Не додумался до регулярки рони, поэтому породил такой код:
https://jsfiddle.net/rhqap58q/

<table class="table product__table">
                            <tr class="table__row">
                                <td class="table__cell">Мощность бензинового двигателя</td>
                                <td class="table__cell">2800 W или 3,9 л.с.</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Обороты</td>
                                <td class="table__cell">8800 в мин.</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Шина</td>
                                <td class="table__cell">45 см (450 мм)</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Цепной шаг</td>
                                <td class="table__cell">0.325 дюйма</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Объем двигателя внутреннего сгорания</td>
                                <td class="table__cell">52 см³</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Объем бака для топлива</td>
                                <td class="table__cell">680 мл</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Объем бака для масла</td>
                                <td class="table__cell">350 мл</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Масляный насос</td>
                                <td class="table__cell">Автомат</td>
                            </tr>
                            <tr class="table__row">
                                <td class="table__cell">Рекомендованное топливо</td>
                                <td class="table__cell">Бензин АИ-92</td>
                            </tr>
                            


                        </table>
<script>
[].forEach.call(document.querySelectorAll('.table__cell'),function(cell){
	var html=cell.innerHTML;
	
	cell.textContent.split(/\s+/g).map(function(word){
		return word.replace(/[^\-a-zа-яё\.\,\d]+?/gi,'');
	}).filter(function(word){
		return word.replace(/\D+?/g,'').length;
	}).forEach(function(phrase){
		html=html.replace(phrase,'<span style="color:red;">'+phrase+'</span>');
	});
	
	cell.innerHTML=html;
});
</script>

Tipylja · #4 (**permalink**) 13.03.2018, 17:54

Как всегда спасибо!!Плюсы уже ставил, больше не разрешает=)))

Форум

Справочник

Discord чат

Курсы javascript