最近在弄内文广告程序,现在遇到一个问题暂时不知道如何解决:
我们对关键词加超链接的操作是通过正则表达式替换地,这就遇到一个问题,必须首先判断出页面中的这个关键词是是属于html标签的一部分(如title,alt等),还是属于可替换的文本。
否则将title,alt等属性内的文字全部替换为超链接,就会造成页面dom结构的混乱。 如下面的 html代码 <div>电脑是个好东西,我们大家都喜欢 <img src="3w.jpg" alt="电脑"/>你喜欢电脑么? <a href="index.htm" title="电脑"> </a>哈哈,就是这个东西。
</div> 我们想把“电脑”这个关键词转化超链接,如果用一般正则替换的方法的话,就将title,alt属性内的“电脑”也都给替换了。 所以这里请各位指点一下,怎么判断出“电脑”这个词属于可替换的文本,还是属于html标签的一部分。
我们对关键词加超链接的操作是通过正则表达式替换地,这就遇到一个问题,必须首先判断出页面中的这个关键词是是属于html标签的一部分(如title,alt等),还是属于可替换的文本。
否则将title,alt等属性内的文字全部替换为超链接,就会造成页面dom结构的混乱。 如下面的 html代码 <div>电脑是个好东西,我们大家都喜欢 <img src="3w.jpg" alt="电脑"/>你喜欢电脑么? <a href="index.htm" title="电脑"> </a>哈哈,就是这个东西。
</div> 我们想把“电脑”这个关键词转化超链接,如果用一般正则替换的方法的话,就将title,alt属性内的“电脑”也都给替换了。 所以这里请各位指点一下,怎么判断出“电脑”这个词属于可替换的文本,还是属于html标签的一部分。
使用捕获,可以得到一个html标记中两个匹配的内容。更替的时候,使用函数作为参数。返回内容。现在使用的电脑上没有相关的样本程序。咱本身对闭包又那啥,所以啊,对不住了……
<script>
function doit(nodes){
for(var i=0;i<nodes.length;i++){
if(nodes[i].nodeType == 3){
var s = nodes[i].nodeValue;
var a = s.split("电脑");
if(a.length>1){
var span= document.createElement("SPAN")
for(var j=0;j<a.length-1;j++){
span.appendChild(document.createTextNode(a[j]));
var ea = document.createElement("A");
ea.href="xxxx.xx";
ea.innerHTML = "电脑";
span.appendChild(ea);
}
span.appendChild(document.createTextNode(a[a.length-1]));
nodes[i].parentNode.replaceChild(span, nodes[i]);
}
}
if(nodes[i].childNodes.length>0){
doit(nodes[i]);
}
}
}
window.onload=function(){
var src = document.getElementById("pad");
var nodes = src.childNodes;
doit(nodes);
}
</script>
<div id="pad">电脑是个好东西,我们大家都喜欢 <img src="3w.jpg" alt="电脑"/>你喜欢电脑么? <a href="index.htm" title="电脑"> </a>哈哈,就是这个东西。
</div>
悄悄问一下nodes[i].nodeType == 3 是什么意思?
我这里怎么一直不走这个分支呢?
[code=HTML<div id="pad">
<p>
电脑是个好东西,我们大家都喜欢
<img src="ajax.jpg" alt="电脑" />你喜欢电脑么? <a href="index.htm" title="电脑"></a>哈哈,就是这个东西。</p>
</div>[/code]
这是我的测试代码,加了<p>标签就不好使了
<div id="pad">
<p>
电脑是个好东西,我们大家都喜欢
<img src="ajax.jpg" alt="电脑" />你喜欢电脑么? <a href="index.htm" title="电脑"> </a>哈哈,就是这个东西。 </p>
</div>
这是我的测试代码,加了 <p>标签就不好使了
<script>
function doit(nodes){
for(var i=0;i<nodes.length;i++){
if(nodes[i].nodeType == 3){
var s = nodes[i].nodeValue;
var a = s.split("电脑");
if(a.length>1){
var span= document.createElement("SPAN")
for(var j=0;j<a.length-1;j++){
span.appendChild(document.createTextNode(a[j]));
var ea = document.createElement("A");
ea.href="xxxx.xx";
ea.innerHTML = "电脑";
span.appendChild(ea);
}
span.appendChild(document.createTextNode(a[a.length-1]));
nodes[i].parentNode.replaceChild(span, nodes[i]);
}
}
else if(nodes[i].childNodes.length>0){
doit(nodes[i].childNodes);
}
}
}
window.onload=function(){
var src = document.getElementById("pad");
var nodes = src.childNodes;
doit(nodes);
}
</script>
<div id="pad">
<p>
电脑是个好东西,我们大家都喜欢
<img src="ajax.jpg" alt="电脑" />你喜欢电脑么? <a href="index.htm" title="电脑"> </a>哈哈,就是这个东西。 </p>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<script type="text/javascript">
<!--
window.onload = function(){
var reg = /<[^>]*(电脑)[^>]*>/ig;
var arr = [], i = 0;
document.body.innerHTML = document.body.innerHTML.replace(reg,function($0){
arr.push($0);return "%%";
});
document.body.innerHTML = document.body.innerHTML.replace(/(电脑)/g,"<a href=''>$1</a>").replace(/%%/g,function(){
return arr[i++];
});
}
//-->
</script>
</head> <body>
<div id="pad">
<p>
电脑是个好东西,我们大家都喜欢
<img src="ajax.jpg" alt="电脑" />你喜欢电脑么? <a href="index.htm" title="电脑"> </a>哈哈,就是这个东西。 </p>
</div>
</body>
</html>