JS-text节点模拟innerHTML属性

# [在线预览](https://jsfiddle.net/1010543618/mz7ybu8g/2/) text 节点无 innerHTML 这个属性!!! 如果直接修改 text 节点的属性(data,nodeValue,textContent),或者使用 js 原生的修改 text 节点的内容的方法都会将 HTML 的预留字符变成转义字符直接显示成文本了,解决方法有: 1. 使用正则表达式找出 pre 的 innerHTML 字符串中的全部 text 节点的字符串进行修改 2. 给 text 外面包裹一个标签,改包裹标签的 innerHTML,把包裹标签的内容移动到外面,删除包裹标签 3. 使用 jquery 的 replaceWith 方法,这个就非常严谨了 ```js 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 标签中的回车替换为 `
`,空格替换为 `&ebsp`;,制表符替换成双 `&ebsp`; ```html Document
d3.selectAll("circle").transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; })
    .attr("r", function(d) { return Math.sqrt(d * scale); });
Replace all line breaks,blanks and tabs.

innerHTML of pre:

```

转载于:https://www.cnblogs.com/jffun-blog/p/10206569.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值