例えば、のケースであれば下のコードで実装できます。
<div id="target">
<a>aaa</a>
<a>bbb</a>
<a>ccc</a>
</div>
もし質問の意図と違っていたらコメントください。
function changeStr(element) {
if (element == null) {
var element = document.getElementById("target");
}
if (element.nodeType == 1) {
Array.prototype.forEach.call(element.children, function(e, i) {
e.textContent = "NUM:" + (i + 1);
});
}
};
function changeStr(element) {
if (element == null) {
var element = document.getElementById("target");
}
if (element.nodeType == 1) {
Array.prototype.forEach.call(element.children, function(e, i) {
e.textContent = "NUM:" + (i + 1);
});
}
};
<div id="target">
<a>aaa</a>
<a>bbb</a>
<a>ccc</a>
<p>ddd<b>eee</b>fff</p>
</div>
<button onclick="changeStr(null)">実行</button>
【実行前】
<div id="target">
<a>aaa</a>
<a>bbb</a>
<a>ccc</a>
<p>ddd<b>eee</b>fff</p>
</div>
【実行後】
<div id="target">
<a>NUM:1</a>
<a>NUM:2</a>
<a>NUM:3</a>
<p>NUM:4<b>NUM:5</b>NUM:6</p>
</div>
上記【実行前】、【実行後】を想定して書いてみましたがいかがでしょうか。
function changeStr(element) {
if (element == null) {
var element = document.getElementById("target");
}
if (element.nodeType == 1) {
var result = {};
result.index = 0;
result.count = 1;
result.str = element.innerHTML
.replace(/\s*(<[a-z])/gi, "$1").trim()
.replace(/>([^<]+)</g, ">NUM:<");
do {
result = _numIncrement(result.str, result.index, result.count);
result.index = result.index + 1;
result.count = result.count + 1;
} while(result.index);
element.innerHTML = result.str;
}
function _numIncrement(_str, _index, _count) {
var _numIndex = _str.indexOf("NUM:", _index);
var _before = _str.substr(0, _numIndex + 4);
var _after = _str.substr(_numIndex + 4);
if(_numIndex >= 0) {
_str = _before + _count + _after;
}
return {"str": _str, "index": _numIndex, "count": _count};
};
};
<div id="target">
<a>aaa</a>
<a>bbb</a>
<a>ccc</a>
<p>ddd<b>eee</b>fff</p>
</div>
<button onclick="changeStr(null)">実行</button>
>
の代わりに@
を使う様にしましょう。