如何解析浏览器兼容性的可编辑DIV文本
我使div可编辑。 当我试图解析div的文本时，我需要做下面的正则表达式。
innerDOM = "I had downloaded all the material from the Intern,
You will find dfvdfvdvdfvdfvdvdvdf dfvdfvdvdfvdfvdfvdfvd" innerDOM.replace(//g, "
").replace(//g, "");
正则表达式在firefox和chrome上运行良好。 但不是在IE中。 我应该做些什么改变？
请参阅此FIDDLE以便更好地理解……
DOM操作是jQuery的一部分。 投资学习jQuery将为您编写DOM遍历和修改带来很长的路要走。
$("div[style='cursor: text']").unwrap().prepend("
");
unwrap删除元素但保持子元素完好无损。 jQuery Attribute Equals Selector用于选择具有光标样式属性的所有divs 。 你可以在这里运行它。
您可以使这更加健壮，因为目前您不会选择具有更多或更少空格或其他琐碎差异的div。 例如：
与上面的选择器不匹配。 您可以通过引入设置游标的CSS类来解决这个缺点。 在这种情况下，
变为
，您可以使用类选择器： $("div.textCursor")
//FINAL ANSWER var domString = "", temp = ""; $("#div-editable div").each(function() { temp = $(this).html(); domString += "
" + ((temp == "
") ? "" : temp); }); alert(domString);
看到这个小提琴的答案。
我在这个网站找到了这个解决方案：
$editables = $('[contenteditable=true']; $editables.filter("p,span").on('keypress',function(e){ if(e.keyCode==13){ //enter && shift e.preventDefault(); //Prevent default browser behavior if (window.getSelection) { var selection = window.getSelection(), range = selection.getRangeAt(0), br = document.createElement("br"), textNode = document.createTextNode($(" ").text()); //Passing " " directly will not end up being shown correctly range.deleteContents();//required or not? range.insertNode(br); range.collapse(false); range.insertNode(textNode); range.selectNodeContents(textNode); selection.removeAllRanges(); selection.addRange(range); return false; } } });