循环通过div内的文本节点 [英] Loop through text nodes inside a div
问题描述
每次点击时，都会加载一个文本节点通过ajax它是适当的内容。但是之后我需要在那里的任何文本节点内进行文本替换。
我的当前代码在加载ajax内容后，循环遍历所有文本节点整个页面，因此是资源密集型的。
我一直在寻找小时，试图找出如何通过div循环，并获得文本节点.. 。
并且必须在firefox，google chrome和ie6中运行。
有什么想法或建议？ / p>
按照要求，这里是代码：
function ajaxLoader（url ，id）{
if（document.getElementById）{
var x =（window.ActiveXObject）？新的ActiveXObject（Microsoft.XMLHTTP）：new XMLHttpRequest（）; （x）{
x.onreadystatechange = function（）{
if（x.readyState == 4&& x.status == 200）{
}
{
el = document.getElementById（id）;
el.innerHTML = x.responseText;
}
}
x.open（GET，url，true）;
x.send（null）;
}
// alert（id）;
CheckTranslate（id）;
// setTimeout（'CheckTranslate（this）;'，1000）;
函数CheckTranslate（id）{
//函数获取节点的文本
var content = function（node ，txt）{
if（txt）{
if（node.textContent）{
node.textContent = txt;
} else if（node.nodeValue）{
node.nodeValue = txt;
}
} else {
return node.textContent？ node.textContent：node.nodeValue;
}
};
//通过id内容回避div
$（＃+ id）.each（function（）{
//赋予对象处理函数
var obj = $（this） .html（）;
//检查那里有多少个文本节点
var mylen = obj.length;
if（mylen> 0）{
//循环遍历每个文本节点
}
}）;
//递归ajax内容
（函数（父）{
var childs = parent.childNodes;
//如果有子元素到
if（childs&& childs.length）{
//遍历每个文本节点
for（var i = 0，node; node = childs [i]; i ++）{
//找到文本节点，执行替换
if（node.nodeType == 3）{
//获取当前文本节点的值
var value = content（node）;
//获取当前文本节点的类名
var myclass = $（this）.attr（class）;
//获取这个节点的数据属性
var ist = $（this）.data（'translated'）;
//检查这个节点是否正确，没有数据属性和值不是未定义的
if（typeof（value）！='undefined'&& myclass！='box_title'&& ist！='yes'&&（mycla ss =='status_bar'|| myclass ==''|| myclass =='box_title_small'|| myclass =='status_bar_select'））{
//通过英文数组查找匹配
for（var x = 0; x
//获取当前英语短语
var from = en_lang [x];
//获取当前其他语言短语
var to = other_lang [x];
if（value.match（from））{
content（node，value.replace（from，to））;
if（$ .browser.msie =='false'）{
$（node）.data（'translated'，'yes'）;
}
}
//结束检查值匹配
}
}
} else {
arguments.callee（node）;
}
}
}
}）（document.body）;
$ b有两个函数，ajaxLoader，加载div的ajax内容，那么CheckTranslate会在新内容加载完成后进行翻译。
问题在于函数（父）部分查看所有文本节点， 'd只看文本节点里面的div。
但我只是不知道如何引用这些...
这种东西很难找出来，而jquery的文档不是很容易学习...
解决方案我确定有更好的方法来做到这一点，但在普通的JavaScript中，你可以写一个递归函数：
函数ReplaceChildText（node，findText，replaceText）{
if（node.nodeType == 3）{
node.innerHTML = node.innerHTML.replace（findText，replaceText）;
} else {
（node.childNodes中的var子元素）{
ReplaceChildText（child，findText，replaceText）;
}
}
}
你可以这样称呼它：
ReplaceChildText（document.getElementById（'divID'），'findText'，'replacement'）;
I am trying to do a text replace, but to do so, i need to loop through the text nodes of a div.
Each Div upon clicking, loads via ajax it's appropriate content. But then I need to do text-replacing inside any of the text nodes inside there.
My current code, after loading the ajax content, loops through all text nodes of the whole page, and therefore is too resource intensive.
I have been looking for hours trying to find out how to both loop thru a div, and get the text nodes...
and this has to work in firefox, google chrome and ie6.
Any thoughts or suggestions?
As Requested, here is the code:
function ajaxLoader(url, id) {
if (document.getElementById) {
var x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
}
if (x) {
x.onreadystatechange = function () {
if (x.readyState == 4 && x.status == 200) {
el = document.getElementById(id);
el.innerHTML = x.responseText;
}
}
x.open("GET", url, true);
x.send(null);
}
// alert(id);
CheckTranslate(id);
// setTimeout('CheckTranslate(this);', 1000);
}
function CheckTranslate(id) {
// function to get text of a node
var content = function (node, txt) {
if (txt) {
if (node.textContent) {
node.textContent = txt;
} else if (node.nodeValue) {
node.nodeValue = txt;
}
} else {
return node.textContent ? node.textContent : node.nodeValue;
}
};
// recuse div by id content
$("#"+id).each(function() {
// assign object handler
var obj = $(this).html();
// check how many text nodes there
var mylen = obj.length;
if (mylen > 0) {
// loop thru each text node
}
});
// recurse ajax content
(function (parent) {
var childs = parent.childNodes;
// if there are children to this
if (childs && childs.length) {
// loop through each text node
for (var i = 0, node; node = childs[i]; i++) {
// text node found, do the replacement
if (node.nodeType == 3) {
// grab value of current text node
var value = content(node);
// grab class name of current text node
var myclass = $(this).attr("class");
// grab data property of this node
var ist = $(this).data('translated');
// check if this is correct class and has no data property and value is not undefined
if (typeof(value) != 'undefined' && myclass != 'box_title' && ist != 'yes' && (myclass == 'status_bar' || myclass == '' || myclass == 'box_title_small' || myclass == 'status_bar_select')) {
// loop thru english array to find matches
for (var x = 0; x < en_count; x++) {
// get current english phrase
var from = en_lang[x];
// get current other language phrase
var to = other_lang[x];
if (value.match(from)) {
content(node, value.replace(from, to));
if ($.browser.msie == 'false') {
$(node).data('translated', 'yes');
}
}
// end check value match
}
}
} else {
arguments.callee(node);
}
}
}
})(document.body);
}
There are 2 functions, ajaxLoader, which loads the ajax content for divs, and then the CheckTranslate, which does translation after the new content is loaded.
The problem being is the function(parent) section looks at all text nodes, where for performance, i'd rather only look at text nodes inside the div.
But I just don't get how to refer to those...
It is very hard to figure this kind of stuff out, and jquery's documentation is not really easy to learn...
解决方案 I'm sure there's a better way to do this, but in plain javascript, you can just write a recursive function:
function ReplaceChildText(node, findText, replaceText) {
if (node.nodeType == 3) {
node.innerHTML = node.innerHTML.replace(findText, replaceText);
} else {
for (var child in node.childNodes) {
ReplaceChildText(child, findText, replaceText);
}
}
}
You can call it like this:
ReplaceChildText(document.getElementById('divID'),'findText','replacement');
这篇关于循环通过div内的文本节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
