How to parse editable DIV's text with browser compatibility

Question

I make div as editable. while i tried to parse div's text, i was needed to do the below regular expression.

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, "");

Above regular expression works good in firefox and chrome. But not in IE. What changes should i do?

See this FIDDLE for better understanding...

Do *not* use a RegExp, especially not *that* RegExp to parse HTML. You already experienced that it's not reliable. Can you show the code which generates the value of `innerDOM`? — Rob W, Oct 10 '12 at 14:00
And where did you get THAT string? I hope that you didn't literally copy-paste HTML strings in JavaScript code? (especially since the quotes in the string are not escaped...) — Rob W, Oct 10 '12 at 14:06
actually, i make DIV as editable. while i hit enter and type in IE, each line it construct DOM with divs instead of
. But working good in IE and Chrome. I get that string using $("#div-edit").html(). — user10, Oct 10 '12 at 14:10

Laoujin · Answer 1 · 2012-10-10T15:31:29.363

4

DOM manipulation is one of the things jQuery was made for. Investing in learning jQuery will take you a long way towards writing DOM traversal and modification.

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

unwrap deletes the element but keeps the children intact. The jQuery Attribute Equals Selector is used to select all divs with the cursor style attribute. You can run it live here.

You could make this more robust as currently you would not select a div with more or less whitespace or with other trivial differences. For example: <div style="cursor:text;"> is not matched by the above selector. You can work around this shortcoming by introducing a CSS class that sets the cursor. In this case <div style="cursor: text"> becomes <div class='textCursor'> and you can use the class selector: $("div.textCursor")

edited Oct 10 '12 at 15:31

answered Oct 10 '12 at 14:05

Laoujin

9,962
7
42
69

@RobW "How do I do this? This is what I have using regular expressions." "Don't use regular expressions, use jQuery instead, like this". The fact that the "like this" part was incomplete doesn't mean that the advise to use jQuery was wrong. The question doesn't say that the answer must continue to use regular expressions for some reason. – Oct 10 '12 at 14:17
@Laou I'm not suggesting a RegExp, but DOM manipulation from [Vanilla JS](http://vanilla-js.com/). Your updated answer is still not an improvement, because it didn't address points 1 and 2 from my previous comment. EDIT: From a comment in the OP you can derive that the OP is using jQuery. Feel free to post a jQuery answer, but don't forget to address the other points. – Rob W Oct 10 '12 at 14:18
@RobW I am using jquery as well in my app. So if solution contains jquery work, no problem in my side. – user10 Oct 10 '12 at 14:22
@Laoujin unwrap will remove the DIV. but i need to replace it with
– user10 Oct 10 '12 at 14:30
1

Deleted my own answer, because the OPs question is covered well in your answer. For the ones who are interested, the pure JS solution is available at http://jsfiddle.net/wqsSf/1/ (works even in IE6). – Rob W Oct 10 '12 at 17:18
@Laoujin Future readers do not know the previous context of the conversation, and it doesn't serve any purpose any more, so I've deleted some irrelevant comments. If you've read this comment, I'll delete this one as well. – Rob W Oct 10 '12 at 17:26
@Laoujin your solution is not working. see this [Fiddle](http://jsfiddle.net/sathyamoorthi/BmTNP/4/) – user10 Oct 11 '12 at 03:38
@user10> The code does work, the wrong output is because you didn't integrate it completely correctly. But since you already found a solution yourself there is little use in updating my answer :) – Laoujin Oct 12 '12 at 10:34

score 3 · Accepted Answer · answered Oct 11 '12 at 04:47

3

//FINAL ANSWER
var domString = "", temp = "";

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

alert(domString);

see this fiddle for answer.

answered Oct 11 '12 at 04:47

user10

5,186
8
43
64

Thanks to @Laoujin and @ Rob W for their valuable input. – user10 Oct 11 '12 at 04:48
Very nice. This seems to work in Firefox (Mac) on iOS (Safari), Safari (Mac) and Chrome (Mac). There is one thing I'd change though, instead of using '
', I'd use "\n", because I want to write to a file afterwards. Any opinions about this? – Mosselman Jun 10 '13 at 08:53
The above solution breaks in windows chrome. – pratik nagariya Nov 22 '14 at 07:08

score 3 · Answer 3 · answered Nov 04 '12 at 10:26

i found this solution in this site:

$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;
  }

   }
});

How to parse editable DIV's text with browser compatibility

3 Answers3

Linked