Форум

qwertyuiop · #1 (**permalink**) 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 />?
ток как это сделать?

ваый · #2 (**permalink**) 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 · #3 (**permalink**) 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 · #4 (**permalink**) 01.08.2011, 17:55

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

qwertyuiop · #5 (**permalink**) 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>

ваый · #6 (**permalink**) 01.08.2011, 18:11

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

qwertyuiop · #7 (**permalink**) 01.08.2011, 18:26

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

ваый · #8 (**permalink**) 01.08.2011, 18:35

Сообщение от qwertyuiop

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

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

розовый слоник · #9 (**permalink**) 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 · #10 (**permalink**) 01.08.2011, 21:42

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

Форум

Справочник

Discord чат

Курсы javascript