javascript遍历无限级html标签！！！

Question

本帖最后由 chnprogram 于 2010-05-31 13:06:29 编辑

Answer 1

<INPUT TYPE="text" id="inp" value="<b>abc<i><u>defg</u></i><u>123</u>456</b>" size="100">
<BR><TEXTAREA id="ta" ROWS="" COLS="100"></TEXTAREA>
<SCRIPT LANGUAGE="JavaScript">
<!--
var str = document.getElementById("inp").value;
var reg = /^<([a-z]+)>(.*)<\/\1>$/ //正则匹配最外层的封闭标签
var str1 = str.replace(reg,"$2"); //去掉最外面的一层<b><\b>（否则整个字符串都能匹配……）
reg = /(<([a-z]+)>.*<\/\2>)/img //正则匹配封闭标签（组）
var str1 = str1.replace(reg,"<b>$1</b>"); //给匹配的标签外面套上<b><\b>
str1 = str1.replace(/^(\w*)/,"<b>$1</b>"); //给开头裸露部分上套
str1 = str1.replace(/(\w*)$/,"<b>$1</b>"); //给结尾裸露部分上套
document.getElementById("ta").value = str1;
//-->
</SCRIPT>

Answer 2

lieri111：其实就是把：<b>abc<i><u>defg</u></i><u>123</u>456</b>，拆分开，现在是标签嵌套标签的。我要的效果是：把字符串拆分开，再分配给每个内容对应的标签。处理完显示的文字样式和没处理前的一样就行了。

Answer 3

zyzy15，你好刚在本地测试了下你的代码，我要的效果就是这样的。不过字符串嵌套三层是可以的，在嵌套一层或两层就不行，可否帮我再改进下，非常感谢！

Answer 4

LZ要处理的字符串是啥样的？
能不能贴出来一窥真容？  <INPUT TYPE="text" id="inp" value="<b>abc<span><i><u>defg</u></i></span><u>123</u>456</b>" size="100">
<BR><TEXTAREA id="ta" ROWS="" COLS="100"></TEXTAREA>
<!-- 
又加了一层<span></span>，
结果是<b>abc</b><b><span><i><u>defg</u></i></span></b><b><u>123</u></b><b>456</b> 
貌似挺对的呀……
另外，下面的正则表达式没有考虑标签内带属性的情况，要注意
-->
<SCRIPT LANGUAGE="JavaScript">
<!--
    var str = document.getElementById("inp").value;
    var reg = /^<([a-z]+)>(.*)<\/\1>$/ //正则匹配最外层的封闭标签
    var str1 = str.replace(reg,"$2"); //去掉最外面的一层<b><\b>（否则整个字符串都能匹配……）
    reg = /(<([a-z]+)>.*<\/\2>)/img //正则匹配封闭标签（组）
    var str1 = str1.replace(reg,"<b>$1</b>"); //给匹配的标签外面套上<b><\b>
    str1 = str1.replace(/^(\w*)/,"<b>$1</b>"); //给开头裸露部分上套
    str1 = str1.replace(/(\w*)$/,"<b>$1</b>"); //给结尾裸露部分上套
    document.getElementById("ta").value = str1;
//-->
</SCRIPT>

Answer 5

zyzy15代码改成这样就不行了<INPUT TYPE="text" id="inp" value="<b>abc<i><u><span>de</span>fg</u></i><u>123</u>456</b>" size="100">

Answer 6

<script>
var arr=["<b>abc<i><u>defg</u></i><u>123</u>456</b>",
         "<b>abc<i><u><span>de</span>fg</u></i><u>123</u>456</b>"]
var i;
for(i=0;i<arr.length;i++)splitArr(arr[i]);function splitArr(str){
    var rtn=[];
    var obj=document.createElement("div");
    obj.innerHTML=str;
    
    var list=obj.childNodes[0].childNodes;
    var i;
    for(i=0;i<list.length;i++){
        if(list[i].innerHTML)rtn[rtn.length]=list[i].outerHTML;
        else rtn[rtn.length]=list[i].nodeValue;
    }
    alert(rtn);
}
</script>
<b>abc</b>
<b><i><u>defg</u></i></b>
<b><u>123</u></b>
<b>456</b>

Answer 7

改后的结果是：
<b>abc</b>
<b><i><u><span>de</span>fg</u></i></b>
<b><u>123</u></b>
<b>456</b>对于<b><i><u><span>de</span>fg</u></i></b> LZ期望怎样的结果？
<b><i><u><span>de</span></u></i></b> <b><i><u>fg</u></i></b>？