вставка текста в начато каждой строки
можноли с помощью 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 />? ток как это сделать? |
Цитата:
<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, а не просто текст + | |
<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>
так? |
ваый,
ток он текст переносит, походу из-за параграфа |
<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>
|
Ооооо.. Прежде чем делать что-то на javascript, надо для начала хотя бы изучить основы html, а то ничего хорошего их этого не получится.
|
а что такое? я знаю хтмл нормально
|
Цитата:
2. <div>aaaaaaaaa</div><br /> Как-то не очень.. |
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е строчки? |
розовый слоник,
как? я с DOM плохо работаю |
розовый слоник,
я пока пришел к такому коду:
cont=document.querySelector('.code');
code=cont.innerHTML;
i=0;
getLine=function() {
x=' '
if(i<9){
x=' 0'}
return '<span>'+x+(++i)+' | </span>';
};
code = code.replace(/^\s*/, getLine).replace(/<br.*?\/?>\s*(?!\s*$)/g, function() {
return '<br />'+'<span>'+getLine()+'</span>';
});
cont.innerHTML = code;
он работает, вставляет " 01 | ", " 02 | ", " 03 | " и так далее, но можно его как-то сократить или почистить? |
Он пришел к коду.. Я тебе этот код для примера написал, в IE он не будет работать.
|
ваый,
я его подправил, у теебя 0 не писал и в тег спан не обворачивал, а как сделать, чтобы в ие работал? |
не использовать querySelector
|
ваый,
напиши, как именно, пожалуйста |
через getElementsByClassName?
|
i=0;
cont=document.getElementsByClassName("code")[i];
code=cont.innerHTML;
getLine=function() {
return '<span>'+(++i)+' | </span>';
};
code = code.replace(/^\s*/, getLine).replace(/<br.*?\/?>\s*(?!\s*$)/g, function() {
return '<br />'+'<span>'+getLine()+'</span>';
});
cont.innerHTML = code;
работает |
ваый,
в ие всеравно не работает |
ваый,
for (var i=0;i<document.getElementsByClassName("code").length;i++){
cont=document.getElementsByClassName("code")[i];
code=cont.innerHTML;
y=1
getLine=function() {
x=' '
if(y<10){
x=' 0'}
return '<span>'+x+(y++)+' | </span>';
};
code = code.replace(/^\s*/, getLine).replace(/<br.*?\/?>\s*(?!\s*$)/g, function() {
return '<br />'+'<span>'+getLine()+'</span>';
});
cont.innerHTML = code;
}
до этого дошел в ие не пашет всеравно |
Ну ты даешь. Как ты думаешь, почему я сказал, что с querySelector не будет работать в ие? Потому что там нету поддержки querySelector. C getElementsByClassName та же ситуация. Значит, что надо сделать? Найти функцию getElementsByClassName, которая будет срабатывать, когда нету нативной поддержки.
|
ваый,
незнаю таких, чстно говоря незнаю даже что значит Цитата:
|
гет елемент бу ид?
|
Я ж уже сказал, берешь функцию getElementByClassName И используешь. Надо изучить основы.
var getLine = function() {...};
var container = document.getElementById("page");
var collection = getElementsByClass('code', container);
for (var i=0; i<collection.length; i++) {
var code = collection[i].innerHTML;
code = code.replace(...) ...
collection[i].innerHTML = code;
}
|
ваый,
if(document.getElementsByClassName) {
getElementsByClass = function(classList, node) {
return (node || document).getElementsByClassName(classList)
}}
else {
getElementsByClass = function(classList, node) {
var node = node || document,
list = node.getElementsByTagName('*'),
length = list.length,
classArray = classList.split(/\s+/),
classes = classArray.length,
result = [], i,j
for(i = 0; i < length; i++) {
for(j = 0; j < classes; j++) {
if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
result.push(list[i])
break
}}}
return result
}}
con=document.getElementById("page");
cont=getElementsByClass("code", con);
for (var i=0;i<cont.length;i++){
code=cont[i].innerHTML;
y=1
getLine=function() {
x=' '
if(y<10){
x=' 0'}
return '<span>'+x+(y++)+' | </span>';
};
code = code.replace(/^\s*/, getLine).replace(/<br.*?\/?>\s*(?!\s*$)/g, function() {
return '<br />'+'<span>'+getLine()+'</span>';
});
cont[i].innerHTML = code;
}
в ие ставит 1 | и все дальше не пашет |
| Часовой пояс GMT +3, время: 04:54. |