Как разобрать редактируемый текст DIV с совместимостью с браузером

Я делаю 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 для лучшего понимания...

Ответы

Ответ 1

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

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

alert(domString);

см. fiddle для ответа.

Ответ 2

Манипуляция DOM является одной из вещей jQuery. Инвестирование в обучение jQuery позволит вам пройти долгий путь по обходу и модификации DOM.

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

unwrap удаляет элемент, но сохраняет его неповрежденными. Параметр jQuery Атрибут выбора атрибутов используется для выбора всех divs с помощью атрибута стиля курсора. Вы можете запустить его в режиме реального времени здесь.

Вы можете сделать это более надежным, так как в настоящее время вы не будете выбирать div с более или менее пробелами или с другими тривиальными различиями. Например: <div style="cursor:text;"> не соответствует указанному выше селектору. Вы можете обойти этот недостаток, представив класс CSS, который устанавливает курсор. В этом случае <div style="cursor: text"> становится <div class='textCursor'>, и вы можете использовать селектор классов: $("div.textCursor")

Ответ 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;
  }

   }
});