JS text Node no innerHTML

Online preview

Text node no innerHTML this property!!!
If you directly modify the text node's properties (data,nodevalue,textcontent), or use JS native to modify the contents of the text node method will be the HTML reserved character into the escape character directly displayed as text, the workaround is:

1. Use regular expressions to find the string of all text nodes in the innerHTML string of the pre to modify
2. Wrap a label outside the text, change the innerHTML of the parcel label, move the contents of the parcel label outside, delete the parcel label
3. Using jquery's ReplaceWith method, this is very rigorous.

replaceWith: function( value ) {  var isFunc = jQuery.isFunction( value );  // Make sure that the elements are removed from the DOM before they are inserted  // this can help fix replacing a parent with child elements  if ( !isFunc && typeof value !== "string" ) {    value = jQuery( value ).not( this ).detach();  }  return this.domManip( [ value ], true, function( elem ) {    var next = this.nextSibling,      parent = this.parentNode;    if ( parent ) {      jQuery( this ).remove();      parent.insertBefore( elem, next );    }  });},

Example: Replace the carriage return in the pre tag with <br>, the space is replaced by the &ebsp;, the tab is replaced by the double &ebsp;

<! DOCTYPEHtml>lang="en">  <metacharset="UTF-8">  <title>Document</title>  <style>Pre, Code{      font-family: "Menlo",monospace;      -webkit-text-size-adjust: 100%;    }Code{      Line-height: 1em;    }Pre{      Border-left: Solid 2px #ccc;      Padding-left: 18px;      margin: 2em 0 2em -20px;    }    . html . String,. JavaScript . String,. JavaScript . RegExp {      Color: #756bb1;    }    . html . Tag,. CSS . Tag,. JavaScript . Keyword {      Color: #3182bd;    }    . Comment {      Color: #636363;    }    . html . DOCTYPE,. JavaScript . number {      Color: #31a354;    }    . html . attr,. CSS . attr,. JavaScript . Class,. JavaScript . Special {      Color: #e6550d;    }  </style><body><pre><codeclass="JavaScript hljs">D3.selectall (<spanclass="string">"Circle"</span>). Transition (). Duration (<spanclass="Number">750</span>). Delay (<spanclass="function"><spanclass="keyword">function</span>(<spanclass="params">D, I</span>)</span>{<spanclass="keyword">Return</span>I<spanclass="Number">10</span>; }). attr (<spanclass="string">"R"</span>,<spanclass="function"><spanclass="keyword">function</span>(<spanclass="params">D</span>)</span>{<spanclass="keyword">Return</span> <spanclass="Built_in">Math</span>. sqrt (d * scale); });</code></pre>  <buttononclick="Pre_replace ()">Replace All line breaks,blanks and tabs.</button>  <p>InnerHTML of Pre:</p>  <pid="Html-of-pre"></p>  <scriptsrc="Https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>  <script>    //Introduce jquery just to use the ReplaceWith method of jquery    ' Use strcat '    varOr:= Document.Queryselector(' pre ')varP= Document.Queryselector(' #html-of-pre ')P.InnerText = Pre.InnerHTML        /** Recursive acquisition of child nodes1 element represents elements2 ATTR Representative Properties3 text represents the textual content in an element or attribute4 cdatasection represents a CDATA section in a document (text that is not parsed by the parser)5 EntityReference represents an entity reference6 entity represents entities7 processinginstruction representative processing instructions8 Comment Representative notes9 document represents the entire documentation (the root node of the DOM tree)DocumentType provides an interface to entities defined for a documentThe DocumentFragment represents a lightweight document object that can accommodate a portion of the documentationNotation represents a symbol declared in a DTD    */var allchildnodes = function (node, type) {//1. Create an array of all nodesvar ALLCN = [];//2. Get all nodes recursivelyvar getallchildnodes = function (node, type, ALLCN) {//Gets all child nodes of the current element nodesvar nodes = node.childnodes;//Get child nodes of nodesFor (var i = 0; i < nodes.length; i++) {var child = nodes[i];//Determines whether the specified type nodeif (Child.nodetype = = type) {Allcn.push (child);            }getallchildnodes (Child, type, ALLCN);        }       }getallchildnodes (node, type, ALLCN);//3. Returns an array of all nodesreturn ALLCN;    }var pre_replace = function () {var keys = Object.keys | | function (obj) {obj = Object (obj)var arr = []For (var a in obj) Arr.push (a)Return arr      }var replace_map = {' \ n ': ' <br/> ',': ' &ensp; ',' \ t ': ' &ensp;&ensp; '      }var alltextnodes = Allchildnodes (pre, 3);      /*text node no innerHTML this property!!! If you directly modify the text node's properties (data,nodevalue,textcontent), or use JS native to modify the contents of the text node method will be the HTML reserved character into the escape character directly displayed as text, the workaround is:1. Use regular expressions to find the string of all text nodes in the pre innerHTML string to modify2. Wrap a label outside the text, change the innerHTML of the parcel label, move the contents of the parcel label to the outside, delete the parcel label3. Using jquery's ReplaceWith method, this is very rigorous.Replacewith:function (value) {var isfunc = jquery.isfunction (value);//Make sure that the elements is removed from the DOM before they is inserted//This can help fix replacing a parent with child elementsif (!isfunc && typeof value!== "string") {value = jQuery (value). Not (This). Detach ();          }return This.dommanip ([value], true, function (elem) {var next = this.nextsibling,parent = This.parentnode;if (parent) {JQuery (This). Remove ();Parent.insertbefore (Elem, next);            }          });        },      */Alltextnodes.foreach (function (textnode) {$ (textnode). ReplaceWith (() =>{return TextNode.data.replace (RegExp (' + ' + keys (replace_map). Join (') + '] ', ' g '), function (match) {//Console.log (match, Replace_map[match])return Replace_map[match]          })        })      });P.innertext = pre.innerhtml    }  </script></body>

JS text Node no innerHTML