Поиск и обвертка для цифр в таблице
Здравствуйте. Подскажите пожалуйста. Есть множество карточек товаров, в них есть таблица, в которой есть значения. Допустим:
<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 |
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>
|
Не додумался до регулярки рони, поэтому породил такой код:
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>
|
Как всегда спасибо!!Плюсы уже ставил, больше не разрешает=)))
|
| Часовой пояс GMT +3, время: 02:17. |