Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   вставка текста в начато каждой строки (https://javascript.ru/forum/misc/19310-vstavka-teksta-v-nachato-kazhdojj-stroki.html)

qwertyuiop 01.08.2011 17:02

вставка текста в начато каждой строки
 
можноли с помощью javascript сделать, чтобы в начале каждой новой строки вставлялся номер и " | "
<div class="code">
lalalalalalala<br />
blablabla<br />
tratata<br />
lalalala<br />
</div>

переделалось в:
<div class="code">
1 | lalalalalalala<br />
2 | blablabla<br />
3 | tratata<br />
4 | lalalala<br />
</div>

может найти блок: document.getElementsByClassName("code"), добавить в начало 1 | , и потом циклом добавлять послекаждого <br />?
ток как это сделать?

ваый 01.08.2011 17:41

Цитата:

Сообщение от qwertyuiop
можноли с помощью javascript сделать, чтобы в начале каждой новой строки вставлялся номер и " | "

Можно много чего сделать. Как вариант, делать замену вхождений:
<div class="code">
    This is line #1<br />
    This is line #2<br>
    This is line #3<br />
</div>

<script>
var cont = document.querySelector('.code');
var code = cont.innerHTML;

var i = 0;
var getLine = function() {
    return ++i + '|';
};
code = code.replace(/^\s*/, getLine).replace(/<br.*?\/?>\s*(?!\s*$)/g, function() {
    return '<br />' + getLine();
});
cont.innerHTML = code;
</script>

А вообще - это хрень какая-то. Это не так делается. Каждая строчка кода обчно обернута свой контейнер, например параграф. Каждый номер строки представляет собой тоже, скажем, span, а не просто текст + |

qwertyuiop 01.08.2011 17:52

<html>
<head>
<title></title>
</head>
<body>
<div id="code">
<p>aaaaaaaaa<br />
<p>bbbbbbbbb<br />
<p>ccccccccc<br />
<p>ddddddddd
</div>
<script type="text/javascript">
lis=document.getElementById('code')
for (var i=0;i<lis.getElementsByTagName("p").length;i++){
x=i+1
firsti = lis.getElementsByTagName('p')[i]
newListElem = document.createElement('span')
newListElem.innerHTML = x+' | '
lis.insertBefore(newListElem, firsti)}
</script>
</body>
</html>

так?

qwertyuiop 01.08.2011 17:55

ваый,
ток он текст переносит, походу из-за параграфа

qwertyuiop 01.08.2011 17:59

<html>
<head>
<title></title>
<style type="text/css">
<!--
div div{display:inline}
-->
</style>
</head>
<body>
<div id="code">
<div>aaaaaaaaa</div><br />
<div>bbbbbbbbb</div><br />
<div>ccccccccc</div><br />
<div>ddddddddd</div><br />
</div>
<script type="text/javascript">
lis=document.getElementById('code')
for (var i=0;i<lis.getElementsByTagName("div").length;i++){
x=i+1
firsti = lis.getElementsByTagName('div')[i]
newListElem = document.createElement('span')
newListElem.innerHTML = x+' | '
lis.insertBefore(newListElem, firsti)}
</script>
</body>
</html>

ваый 01.08.2011 18:11

Ооооо.. Прежде чем делать что-то на javascript, надо для начала хотя бы изучить основы html, а то ничего хорошего их этого не получится.

qwertyuiop 01.08.2011 18:26

а что такое? я знаю хтмл нормально

ваый 01.08.2011 18:35

Цитата:

Сообщение от qwertyuiop (Сообщение 116670)
а что такое? я знаю хтмл нормально

1. <p>aaaaaaaaa<br />
2. <div>aaaaaaaaa</div><br />
Как-то не очень..

розовый слоник 01.08.2011 19:42

lis=document.getElementById('code')
	for (var i=0;i<lis.getElementsByTagName("div").length;i++){
	x=i+1
	firsti = lis.getElementsByTagName('div')[i]
	newListElem = document.createElement('span')
	newListElem.innerHTML = x+' | '
	lis.insertBefore(newListElem, firsti)}


жесть
во первых где var перед каждой переменной?
во вторых зачем так делать? нельзя просто через innerHTML это все делать и не писать лишние 4е строчки?

qwertyuiop 01.08.2011 21:42

розовый слоник,
как? я с DOM плохо работаю


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