javascript — добавляйте только изменения содержимого (не заменяйте весь контент) в режиме предварительного просмотра (с помощью jQuery)

Добавить только изменения в контенте (не заменять весь контент) в live-preview (с помощью jQuery)

Представьте себе функцию предварительного просмотра, где каждый раз, когда что-то печатается в редактируемом поле {amp}lt;div{amp}gt; , его содержимое отображается в окне предварительного просмотра {amp}lt;div{amp}gt; . Минимальный пример:

 jQuery('div#edit').keyup(function() { var a = jQuery(this).html(); jQuery('div#preview').html(a); }); 
 #edit { border: solid 1px #eee; } 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div contentEditable="true" id="edit"{amp}gt;Type here...{amp}lt;/div{amp}gt; {amp}lt;div id="preview"{amp}gt;{amp}lt;/div{amp}gt; 

Этот пример заменяет весь #preview -content всем #edit -content. Вместо того, чтобы заменить все, я хотел бы добавить / удалить только те символы, которые отличаются .

То есть, когда содержимое выбирается нажатием клавиши и сохраняется в переменной a , я хотел бы сравнить a с содержимым окна предварительного просмотра.

  • и отфильтровывать только различия между ними .
  • Затем я хочу, чтобы эти различия были добавлены в окно предварительного просмотра (в правильных местах в уже существующей строке предварительного просмотра).

Это возможно?

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector