3

我将 div 设为可编辑。当我试图解析 div 的文本时，我需要做下面的正则表达式。

innerDOM = "<div style="cursor: text;">I had downloaded all the material from the Intern,<br>You will find</div><div style="cursor: text;">&nbsp;</div><div style="cursor: text;">dfvdfvdvdfvdfvdvdvdf</div><div style="cursor: text;">&nbsp;</div><div style="cursor: text;">dfvdfvdvdfvdfvdfvdfvd</div>"

innerDOM.replace(/<div style="cursor: text">/g, "<br>").replace(/<\/div>/g, "");

以上正则表达式在 Firefox 和 chrome 中效果很好。但不是在 IE 中。我应该做哪些改变？

请参阅此FIDDLE以更好地理解...

4

3 回答 3

4

DOM 操作是jQuery的用途之一。投资学习 jQuery 会让你在编写 DOM 遍历和修改方面走得更远。

$("div[style='cursor: text']").unwrap().prepend("<br>");

unwrap删除元素但保持子元素完整。jQuery Attribute Equals Selector用于选择所有divs具有光标样式属性的内容。您可以在此处实时运行它。

您可以使其更加健壮，因为目前您不会选择具有或多或少空格或其他微不足道的差异的 div。例如：<div style="cursor:text;">与上述选择器不匹配。您可以通过引入一个设置光标的 CSS 类来解决这个缺点。在这种情况下，您<div style="cursor: text">可以<div class='textCursor'>使用类选择器：$("div.textCursor")

于 2012-10-10T14:05:22.713 回答
3 
//FINAL ANSWER
var domString = "", temp = "";

$("#div-editable div").each(function()
            {
                temp = $(this).html();
                domString += "<br>" + ((temp == "<br>") ? "" : temp);
            });

alert(domString);

看到这个小提琴的答案。

于 2012-10-11T04:47:15.993 回答
3

我在这个网站上找到了这个解决方案：

$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($("<div>&nbsp;</div>").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;
  }

   }
});
于 2012-11-04T10:26:46.933 回答