Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Поочередная замена слов (https://javascript.ru/forum/misc/58620-poocherednaya-zamena-slov.html)

karakym 01.10.2015 13:43
Поочередная замена слов
 
Есть таблица <table><tbody><tr><td>.....
Есть массив со строками: Женя, Яша, Витя, Ваня, Юля
В таблице 300 строк к примеру, нужно первое слово каждой ячейки (<td>) заменить поочередно подставляя слова из массива!
Помогите с реализацией пожалуйста!

karakym 01.10.2015 13:46
Например первое слово каждой ячейки: Виталька
Вот нужно в каждой ячейке заменить его на (по очереди) в первой строке это будет Женя, во второй будет Яша и так далее.
И еще как в массив записать строки из textarea, что бы они выступали в качестве слов?

sanmihan 01.10.2015 17:23 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<table id="myTable">
	<tr><td>Виталий курит</td></tr>
	<tr><td>Виталий спит</td></tr>
	<tr><td>Виталий-ломоносов пьет</td></tr>
	<tr><td>Виталий помер</td></tr>
</table>
<textarea id="myTextarea"></textarea>
<button onclick="foo()">Погнали</button>
<script type="text/javascript">
	var textarea = document.getElementById('myTextarea');
	var table = document.getElementById('myTable');
	function foo (argument) {
	 	var arr = textarea.value.split('\n');
	 	var r = table.rows;
	 	for(var i = 0; i < r.length; i++) {
	 		if (i < arr.length)
	 			r[i].cells[0].innerHTML = r[i].cells[0].innerHTML.replace(/^[^\s]+/, arr[i]);
	 	}
	 }
	 textarea.value = 'женя\nвася\nпаша'; //чтобы не вводить вручную
</script>
</body>
</html>

karakym 01.10.2015 21:19
Попытался вставить в свой уже готовый код, но страница зависает!
<!DOCTYPE html><html><head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<style type='text/css'>
body {margin: auto;}
textarea {height: 100px;width: 30%;margin: auto;border: none;background: #eee;outline: none;}
#rescount {width: 8%;height: 100px;background: #eee;display: inline-block;position: fixed;padding: 5px;text-align: center;font-size: 4em;}
#rescount span {font-size: 12px;}
.generate {width: 100%;height: 30px;border: none;background: #eee;outline: none;}
table, td {width: 100%;}
td {background:#c2ff9b;}
</style>
<script type='text/javascript'>
function test(){
  var cols=0;
	var arr=[
		document.getElementById('gruz').value.split(/\n/),
		document.getElementById('gorod').value.split(/\n/),
		document.getElementById('avto').value.split(/\n/)
	];
	var or=document.getElementById('result');
  var rc=document.getElementById('rescount');
	for (var i=0; i<arr[0].length; i++) {
		for (var j=0; j<arr[1].length; j++) {
			for (var k=0; k<arr[2].length; k++) {
				var str=arr[0][i]+' '+arr[1][j]+' '+arr[2][k];
        for(var i = 0; i < or.length; i++) {
          if (i < arr[0].length)
            or[i].cells[0].innerHTML = or[i].cells[0].innerHTML.replace(/^[^\s]+/, arr[0][i]);
          }
        cols=cols+1;
				or.innerHTML=or.innerHTML+'<td>'+str+'</td>';
			};
		};
	};
  rc.innerHTML=cols;
};
</script>
</head><body>
<textarea id="gruz">Коля
Вася
Витя</textarea>
<textarea id="gorod">Любит
Не любит</textarea>
<textarea id="avto">Машу
Дашу
Иру</textarea>
<div id="rescount"></div>
<br/>
<input type="button" onclick='test();' class="generate" value="СГЕНЕРИРОВАТЬ"/>
<table><tbody id="result"></tbody></table></body></html>

sanmihan 02.10.2015 08:08
что вы хотите сделать? сможете полностью описать задачу? наверно вам надо вставлять мой цикл после rc.innerHTML=cols;

karakym 02.10.2015 13:46
Помогите перестроить скрипт!
Ниже приведенный скрипт выполняет функцию генератора комбинаций из 3-х полей textarea
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<style type='text/css'>
body {
  margin: auto;
}
textarea {
  height: 100px;
  width: 30%;
  margin: auto;
  border: none;
  background: #eee;
  outline: none;
}
#rescount {
  width: 8%;
  height: 100px;
  background: #eee;
  display: inline-block;
  position: fixed;
  padding: 5px;
  text-align: center;
  font-size: 3em;
}
#rescount span {
  font-size: 12px;
}
.generate {
  width: 100%;
  height: 30px;
  border: none;
  background: #eee;
  outline: none;
}
table, td {
  width: 100%;
}
td {
  background:#c2ff9b;
}
</style>
<script type='text/javascript'>
function test(){
  var cols=0; 
  var vrs=document.getElementById('gruz').value.replace(/\s+/g, 'SP').split(','); //записываю в массив слова разделяя их при этом запятой
  document.getElementById('gruz').value=vrs;
	var arr=[
		document.getElementById('gruz').value.split(/\n/),
		document.getElementById('gorod').value.split(/\n/),
		document.getElementById('avto').value.split(/\n/)
	];
	var or=document.getElementById('result');
  var rc=document.getElementById('rescount');
  or.innerHTML='';
  rc.innerHTML='';
	for (var i=0; i<arr[0].length; i++) {
		for (var j=0; j<arr[1].length; j++) {
			for (var k=0; k<arr[2].length; k++) {
          var rnd = Math.floor(Math.random() * vrs.length);
          var str=arr[0][i].replace(/^\S+/,vrs[rnd].replace('SP', ' '))+' '+arr[1][j]+' '+arr[2][k]; //пробую менять первое слово на случайное из массива который ранее создавал
          cols=cols+1;
				or.innerHTML=or.innerHTML+'<td>'+str+'</td>';
			};
		};
  }; 
  rc.innerHTML=cols;
};
</script>
</head>
<body>
<textarea id="gruz">
Саня,Леха,Толик
Яша,Серый,Ваня</textarea>
<textarea id="gorod">
Любит
Не любит</textarea>
<textarea id="avto">
Олю
Надю
Иру</textarea>
<div id="rescount"></div>
<br/><input type="button" onclick='test();' class="generate" value="СГЕНЕРИРОВАТЬ"/>
<table><tbody id="result"></tbody></table>
</body>
</html>

С помощью местных гуру и великого гугла, мне удалось переделать в первом поле textarea смысл выполнения, а именно:
Теперь значения из первого поля с помощью запятой режутся в массив после чего случайным образом подставляются в комбинации, но если добавить еще одну строку в это поле, да еще и разделить ее запятыми то получу не совсем то что нужно. Скрипт будет пихать всех под ряд и Колю и Васю и Диму...
Да бы вы меня смогли понять, скрипт берет из всех полей количество строк, а так же их значение и комбинирует их!
Пример: в первом поле 3 значения во втором 2 и в третьем тоже 3, на выходе получим 18 комбинаций из этих слов.
Сейчас скрипт переделал, что бы из первого поля строки резало еще и на слова (так сказать варианты подстановки) то есть, не всю строку, а только случайное слово из этой строки которые поделены запятыми.
Все вроде бы окей, но теперь скрипт не выполняет первоначальную функцию, а именно нарезание на строки, он убирает переносы и записывает все это дело в одну строку. Еще и с реплейсерами я там намудрил...

karakym 02.10.2015 16:59
Как я понимаю логику:
//1. Запишем в arr[0,1,2] нарезанные строки из полей.
//2. Запишем в vrs[arr[0].length] нарезанные с помощью заятой слова.
//3. с помощью функции math.random выведем случайное слово
str=vrs[random].[i]+' '+arr[1].[j]+' '+arr[2].[k];

karakym 03.10.2015 11:38
Помогите составить правильный код, пожалуйста!

karakym 05.10.2015 22:42
Неужель никто не поможет?

Lemme 06.10.2015 02:29
Так что ли?
<textarea id="gruz">
Саня,Леха,Толик
Яша,Серый,Ваня</textarea>
<textarea id="gorod">
Любит
Не любит</textarea>
<textarea id="avto">
Олю
Надю
Иру</textarea>
<ol></ol>
<script>
    var gruz = document.getElementById('gruz').innerHTML;
    gruz = gruz.replace(/\n/g, ',').split(',');

    var gorod = document.getElementById('gorod').innerHTML;
    gorod = gorod.split(/\n/);

    var avto = document.getElementById('avto').innerHTML;
    avto = avto.split(/\n/);

    function rand(item) {
        return item[Math.round(Math.random() * (item.length - 1))];
    }

    var data = [];
    gruz.forEach(function(first) {
        avto.forEach(function(second) {
            data.push(first + ' ' + rand(gorod) + ' ' + second); 
        });
    });

    // это для примера
    data.forEach(function(item) {
        document.querySelector('ol').innerHTML += '<li>' + item + '</li>';
    });
</script>

karakym 06.10.2015 09:36
Lemme,
Практически так, только random'ом нужно выбирать слова (через заяпятые) из поля gruz, а здесь:
data.push(first + ' ' + rand(gorod) + ' ' + second);
Пробовал сам, но чет функция random не работает!

Lemme 06.10.2015 10:31
Цитата:
Пробовал сам
Примеры того, как пробовал.
Цитата:
функция random не работает!
в функцию rand нужно передавать массив.

karakym 06.10.2015 10:56
Lemme,
Просто поменял местами:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<style type='text/css'>
body {
  margin: auto;
}
textarea {
  height: 100px;
  width: 30%;
  margin: auto;
  border: none;
  background: #eee;
  outline: none;
}
#rescount {
  width: 8%;
  height: 100px;
  background: #eee;
  display: inline-block;
  position: fixed;
  padding: 5px;
  text-align: center;
  font-size: 3em;
}
#rescount span {
  font-size: 12px;
}
.generate {
  width: 100%;
  height: 30px;
  border: none;
  background: #eee;
  outline: none;
}
table, td {
  width: 100%;
}
td {
  background:#c2ff9b;
}
</style>
<script type='text/javascript'>
function newgen(){
var gruz = document.getElementById('gruz').innerHTML;
    gruz = gruz.replace(/\n/g, ',').split(',');
 
    var gorod = document.getElementById('gorod').innerHTML;
    gorod = gorod.split(/\n/);
 
    var avto = document.getElementById('avto').innerHTML;
    avto = avto.split(/\n/);
 
    function rand(item) {
        return item[Math.round(Math.random() * (item.length - 1))];
    }
 
    var data = [];
    gorod.forEach(function(first) {
        avto.forEach(function(second) {
            data.push(rand(gruz) + ' ' + first + ' ' + second);
        });
    });
 
    // это для примера
    data.forEach(function(item) {
        document.querySelector('tbody').innerHTML += '<td>' + item + '</td>';
    });
}
</script>
</head>
<body>
<textarea id="gruz">
Саня,Леха,Толик
Вова,Женя,Игорь</textarea>
<textarea id="gorod">
Любит
Не любит</textarea>
<textarea id="avto">
Олю
Надю
Иру
Машу
Дашу</textarea>
<div id="rescount"></div>
<br/><input type="button" onclick='newgen();' class="generate" value="СГЕНЕРИРОВАТЬ"/>
<table><tbody id="result"></tbody></table>
</body>
</html>

karakym 06.10.2015 11:03
И первое поле считается как одна строка, нужно что бы как и в остальных.
Запятой поделил строки не просто так, это как бы варианты что может быть в first

Lemme 06.10.2015 11:10
Цитата:
И первое поле считается как одна строка, нужно что бы как и в остальных.
Запятой поделил строки не просто так, это как бы варианты что может быть в first
Ты сломал мою думалку :(

karakym 06.10.2015 11:24
Lemme,
Вот не могу точно объяснить, смотри в первом поле как и в остальных есть строки, они просто комбинируются!
но еще в первом поле строки поделены запятыми, это должны быть как варианты подстановки. Каждое поле по очереди подставляет свою строку, а в первом поле подставляется случайное слово из этой строки!

karakym 06.10.2015 11:59
Lemme,
Вот этот скрипт, делает то что мне необходимо!
И в результате выходит нужное количество строк ( gruz(2)*gorod(2)*avto(5)=items(20) )
<!DOCTYPE html>
<html><head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<style type='text/css'>
body {margin: auto;}textarea {height: 100px;width: 30%;margin: auto;border: none;background: #eee;outline: none;}
#rescount {width: 8%;height: 100px;background: #eee;display: inline-block;position: fixed;padding: 5px;text-align: center;font-size: 3em;}
#rescount span {font-size: 12px;}
.generate {width: 100%;height: 30px;border: none;background: #eee;outline: none;}
table, td {width: 100%;}
td {background:#c2ff9b;}
</style><script type='text/javascript'>
function newgen(){
var cols=0;
var or=document.getElementById('result');
var rc=document.getElementById('rescount');
var gruz = document.getElementById('gruz').innerHTML;
gruz = gruz.split(/\n/);
var gorod = document.getElementById('gorod').innerHTML;
gorod = gorod.split(/\n/);
var avto = document.getElementById('avto').innerHTML;
avto = avto.split(/\n/);
 
    function rand(item) {
        return item[Math.round(Math.random() * (item.length - 1))];
    }
    or.innerHTML='';
    rc.innerHTML='';
    var data = [];
    gruz.forEach(function(rndgrz) {
      gorod.forEach(function(first) {
        avto.forEach(function(second) {
            data.push(rndgrz + ' ' + first + ' ' + second);
            cols=cols+1;
        });
      });
    });
    // это для примера
    data.forEach(function(item) {
        or.innerHTML += '<td>' + item + '</td>';
    });
    rc.innerHTML=cols;
}
</script></head><body>
<textarea id="gruz">
Саня,Леха,Толик
Вова,Женя,Игорь</textarea>
<textarea id="gorod">
Любит
Не любит</textarea>
<textarea id="avto">
Олю
Надю
Иру
Машу
Дашу</textarea>
<div id="rescount"></div><br/><input type="button" onclick='newgen();' class="generate" value="СГЕНЕРИРОВАТЬ"/>
<table><tbody id="result"></tbody></table></body></html>

Как видишь по результату мы получаем строки типа: Саня,Леха,Толик Любит Олю
Так вот Саня,Леха,Толик нужно разделить на (в данном случае 3 слова) с помощью запятых и вставить в результат только одно случайное слово!
Таких строк может быть много, так вот для каждой строки нужно одно случайное слово из этой строки, если же строка не делится запятыми, то вставляем всю строку как есть!

sanmihan 06.10.2015 12:16 
<!DOCTYPE html>
<html><head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<style type='text/css'>
body {margin: auto;}textarea {height: 100px;width: 30%;margin: auto;border: none;background: #eee;outline: none;}
#rescount {width: 8%;height: 100px;background: #eee;display: inline-block;position: fixed;padding: 5px;text-align: center;font-size: 3em;}
#rescount span {font-size: 12px;}
.generate {width: 100%;height: 30px;border: none;background: #eee;outline: none;}
table, td {width: 100%;}
td {background:#c2ff9b;}
</style><script type='text/javascript'>
function newgen(){
var cols=0;
var or=document.getElementById('result');
var rc=document.getElementById('rescount');
var gruz = document.getElementById('gruz').innerHTML;
gruz = gruz.split(/\n/);
var gorod = document.getElementById('gorod').innerHTML;
gorod = gorod.split(/\n/);
var avto = document.getElementById('avto').innerHTML;
avto = avto.split(/\n/);
  
    function rand(item) {
        return item[Math.round(Math.random() * (item.length - 1))];
    }
    or.innerHTML='';
    rc.innerHTML='';
    var data = [];
    gruz.forEach(function(rndgrz) {
      gorod.forEach(function(first) {
        avto.forEach(function(second) {
			var g = rndgrz.split(',');
			g = rand(g);
            data.push(g + ' ' + first + ' ' + second);
            cols=cols+1;
        });
      });
    });
    // это для примера
    data.forEach(function(item) {
        or.innerHTML += '<td>' + item + '</td>';
    });
    rc.innerHTML=cols;
}
</script></head><body>
<textarea id="gruz">
Саня,Леха,Толик
Вова,Женя,Игорь</textarea>
<textarea id="gorod">
Любит
Не любит</textarea>
<textarea id="avto">
Олю
Надю
Иру
Машу
Дашу</textarea>
<div id="rescount"></div><br/><input type="button" onclick='newgen();' class="generate" value="СГЕНЕРИРОВАТЬ"/>
<table><tbody id="result"></tbody></table></body></html>

karakym 06.10.2015 13:10
Все отлично, все как надо! Только вот еще вопрос остался:
По нажатию на клавишу сгенерировать происходит 
onclick='newgen();'

Но вот если вписать другие значения в поля, то в результате остаются прежние!
Почему не перезаписывает в переменные новые данные полей?

karakym 06.10.2015 13:25
Разобрался!
document.getElementById('gruz').innerHTML;

В полях отлавливаем значение и сразу режем:
document.getElementById('gruz').value.split(/\n/);


Часовой пояс GMT +3, время: 10:40.