Помогите с регуляркой
Добрый день. Мучаюсь довольно долго, прийти к правильному решению не могу.
Есть input: <input id="all_block" type="text" value="is105x1,is132x5,is123x1"> Нужно найти по id инпута кусок строки, и заменить число на соответствующий вводимый "множитель". К примеру есть часть html: <input id="is105" type="text" value="1" onkeyup="test(this.id);"> <input id="is132" type="text" value="1" onkeyup="test(this.id);"> <input id="is123" type="text" value="1" onkeyup="test(this.id);"> Пользователь меняет значение инпута id="is132" на 5 и value инпута id="all_block" должна иметь вид: "is105x1,is132x5,is123x1" В голове уже полная белеберда, регулярку составить не получается. Кто знает как реализовать, прошу помощи. Спасибо |
Пробую так:
function test(id) {
var mn = document.getElementById(id).value;
var all_block = document.getElementById('all_block').value;
alert(all_block.replace(/([\s\S]*)+'id'+x([\s\S]*)\,([\s\S]*)/gi, '$1x'+mn+',$3'));
}
При изменении любого инпута (is105, is132, is123), "думает" 1-2 секунды и выдает значение инпута id="all_block" без изменений. |
Joliat,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var all_block = document.querySelector("#all_block"),
inp = document.querySelectorAll("#is105, #is132, #is123"),
f = function() {
all_block.value = [].map.call(inp, function(el) {
//el.value = +el.value || 1;
return el.id + "x" + el.value
})
};
[].forEach.call(inp, function(item) {
item.addEventListener("input", f)
})
});
</script>
</head>
<body>
<input id="all_block" type="text" value="is105x1,is132x5,is123x1" size="45">
<input id="is105" type="text" value="1" >
<input id="is132" type="text" value="1" >
<input id="is123" type="text" value="1" >
</body>
</html>
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content=" IE=edge, chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<input id="all_blocks" type="text" value="is105x1,is132x5,is123x1">
<input id="is105" type="text" value="1">
<input id="is132" type="text" value="1">
<input id="is123" type="text" value="1">
<script>
(function() {
var all_blocks = document.getElementById("all_blocks");
document.addEventListener("input", function(event) {
var input = event.target;
all_blocks.value = all_blocks.value.replace(new RegExp("(^|,)(" + input.id + ")x(.*?)(,|$)", "gi"), '$1$2x' + input.value + '$4');
});
})();
</script>
</body>
</html>
|
рони, Malleys, спасибо большое. Остановился на последнем варианте, он для меня более понятный.
|
| Часовой пояс GMT +3, время: 07:14. |