最近遇到个innerHTML的问题,js动态加载div innerHTML,将div添加textarea元素(含非标准属性),并且表单在提交时采取将div innerHTML作为一个值提交到后台,再通过dom解析的方式提取出每个textarea具体数据;由于textarea数据是客户端输入,难免会遇到一些字符,dom是无法解析的,为了解决这个问题,提出的解决方案为在div数据提交到后台后,通过replaceall的方式将<textarea name="textarea1" dataid="dataid_1"></textarea>每个数据引用<![CDATA[]]>;但问题随之而来,如何替换?起初打算在每个<textarea name="textarea1" dataid="dataid_1">最后新增属性,然后按规则替换,例如:<textarea name="textarea1" dataid="dataid_1" specialchar="1">然后应用replaceall("specialchar="1">","><![CDATA["),并且将replaceall("</textarea>","]]></textarea>"),这样就解决了该问题;但在实际测试中,存在问题,每次在加载div innerHTML时候,textarea的非标准属性顺序都是在变化,textarea属性值会参与逻辑判断,并且不同的浏览器顺序显示也是不一样的;这样一来上述的实现方式就不可取了;最后是通过正则表达式来解决如下:
content = _content.replaceAll("</textarea>", "]]></data_input>");//content为innerHTML数据
Pattern pat = Pattern.compile("<textarea(.+?)>");
Matcher mat = pat.matcher(_content);
String data = "";
boolean flag = true;
while(flag){
if(mat.find()){
data = mat.group(1);//获取textarea所有属性
_content = _content.replaceFirst("<textarea.+?>", "<data_input "+data+"><![CDATA[");//每次将textarea替换为data_input
}else{
flag = false;
}
}