在线预览
text节点无innerHTML这个属性！！！
如果直接修改text节点的属性（data,nodeValue,textContent），或者使用js原生的修改text节点的内容的方法都会将HTML的预留字符变成转义字符直接显示成文本了，解决方法有：
- 使用正则表达式找出pre的innerHTML字符串中的全部text节点的字符串进行修改
- 给text外面包裹一个标签，改包裹标签的innerHTML，把包裹标签的内容移动到外面，删除包裹标签
- 使用jquery的replaceWith方法，这个就非常严谨了
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 );
}
});
},例：将pre标签中的回车替换为<br>，空格替换为&ebsp;，制表符替换成双&ebsp;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="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>
</head>
<body>
<pre><code class="javascript hljs">d3.selectAll(<span class="string">"circle"</span>).transition()
.duration(<span class="number">750</span>)
.delay(<span class="function"><span class="keyword">function</span>(<span class="params">d, i</span>) </span>{ <span class="keyword">return</span> i * <span class="number">10</span>; })
.attr(<span class="string">"r"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">d</span>) </span>{ <span class="keyword">return</span> <span class="built_in">Math</span>.sqrt(d * scale); });</code></pre>
<button onclick="pre_replace()">Replace all line breaks,blanks and tabs.</button>
<p>innerHTML of pre: </p>
<p id="html-of-pre"></p>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<script>
//引入jquery仅仅为了使用jquery的replaceWith方法
‘use strcat‘
var pre = document.querySelector(‘pre‘)
var p = document.querySelector(‘#html-of-pre‘)
p.innerText = pre.innerHTML
/** 递归获取子节点
1 Element 代表元素
2 Attr 代表属性
3 Text 代表元素或属性中的文本内容
4 CDATASection 代表文档中的 CDATA 部分（不会由解析器解析的文本）
5 EntityReference 代表实体引用
6 Entity 代表实体
7 ProcessingInstruction 代表处理指令
8 Comment 代表注释
9 Document 代表整个文档（DOM 树的根节点）
10 DocumentType 向为文档定义的实体提供接口
11 DocumentFragment 代表轻量级的 Document 对象，能够容纳文档的某个部分
12 Notation 代表 DTD 中声明的符号
*/
var allChildNodes = function(node, type){
// 1.创建全部节点的数组
var allCN = [];
// 2.递归获取全部节点
var getAllChildNodes = function(node, type, allCN){
// 获取当前元素所有的子节点nodes
var nodes = node.childNodes;
// 获取nodes的子节点
for (var i = 0; i < nodes.length; i++) {
var child = nodes[i];
// 判断是否为指定类型节点
if(child.nodeType == type){
allCN.push(child);
}
getAllChildNodes(child, type, allCN);
}
}
getAllChildNodes(node, type, allCN);
// 3.返回全部节点的数组
return 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/>",
‘ ‘: " ",
‘\t‘: "  "
}
var allTextNodes = allChildNodes(pre, 3);
/*
text节点无innerHTML这个属性！！！
如果直接修改text节点的属性（data,nodeValue,textContent），或者使用js原生的修改text节点的内容的方法都会将HTML的预留字符变成转义字符直接显示成文本了，解决方法有：
1. 使用正则表达式找出pre的innerHTML字符串中的全部text节点的字符串进行修改
2. 给text外面包裹一个标签，改包裹标签的innerHTML，把包裹标签的内容移动到外面，删除包裹标签
3. 使用jquery的replaceWith方法，这个就非常严谨了
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 );
}
});
},
*/
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>
</html>