JSFiddle - React, Tailwind, and code Playground

by rakeshraih

HTML

<div contenteditable="true" class="contentEditableBox">
<a class="" target="_blank" href="http://brokendisk.com/code/contenteditable.html" contenteditable="">http://brokendisk.com/code/contenteditable.html</a><br>
<a class="radarLink" target="_blank" href="http://brokendisk.com/code/contenteditable.html" contenteditable="false">http://brokendisk.com/code/contenteditable.html</a>
<div>cx</div><div>c</div><div>x</div><div>cx</div><div>cx</div><div>cx</div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><br></div><div><a class="" target="_blank" href="http://brokendisk.com/code/contenteditable.html" contenteditable="false">http://brokendisk.com/code/contenteditable.html</a><br></div></div>
    
    <input type="button" class="showText" value="Show Text"/>

JavaScript

$(".showText").click(function(){
            
            var text="";
	    	 $(".contentEditableBox").contents().each(function(){
	    		 text=text+getHtmlObjectText(this);
	    	 })
               
            alert(text);
});


	     function getHtmlObjectText(thisObject){
	    	 
	    	 var text="";
    		 if(thisObject.nodeName=="DIV"){
    			 if(thisObject.previousSibling.nodeName!="BR" && thisObject.previousSibling.nodeName!="DIV"){
    				 text=text+"\n";
    			 }
    			 $(thisObject).contents().each(function(){
    				 text=text+getHtmlObjectText(this);
    			 });
    			 if($(thisObject).contents().children("br").length==0){
    				 text=text+"\n";
    			 }
    		 }else if(thisObject.nodeName=="BR"){
    			 text="\n"
    		 }else{
    			 text=thisObject.textContent;
    		 }
    		 
	    	 return text;
	     }