[英]How to get entire HTML from HTMLFragment ( like innerHTML )
If I have fragment = document.createDocumentFragment()
如果我有
fragment = document.createDocumentFragment()
with some random Dom inside and I want to get the entire HTML ( excaly like innerHTML
in regular element or document.documentElement.innerHTML
in document
object. 里面有一些随机的大教堂,我想整个HTML(excaly像
innerHTML
常规元素或document.documentElement.innerHTML
在document
对象。
And after some text manipulation (by regex) return the HTML to the fragment
how can I do that ? 在进行一些文本操作(通过正则表达式)后,将HTML返回到
fragment
,我该怎么做?
I end up with that ugly solution : 我最终得到了这个丑陋的解决方案:
var helperDiv = document.createElement('div');
helperDiv.appendChild(fragment)
var innerHTML = helperDiv.innerHTML.replace(someRegExp,()=>values())
helperDiv.innerHTML = innerHTML;
var len = helperDiv.children.length;
while(len--){
fragment.appendChild( helperDiv.firstChild );
}
So I appreciated a better way 所以我赞赏一个更好的方法
I come with better solution with Range
. 我为
Range
提供了更好的解决方案。
function fragmentInnerHTML(fragment, callback){
var range = new Range();
var helperDiv = document.createElement('div');
helperDiv.appendChild(fragment);
helperDiv.innerHTML = callback( helperDiv.innerHTML)
range.selectNodeContents(helperDiv);
fragment.append( range.extractContents() );
range.detach();
}
fragmentInnerHTML( fr, html => html.replace(/test(\d)/g,'test-$1') );
can be edited to be even fewer lines if needed 如果需要,可以编辑成更少的行
demo: https://jsfiddle.net/vtssq8jz/26/ 演示: https : //jsfiddle.net/vtssq8jz/26/
I stumbled upon similar problem and see if this can help you: 我偶然发现了类似的问题,看看这是否可以帮助您:
var $frag = new DocumentFragment(); var html = '' ; [].forEach.call($frag.children, function(el) { html += el.outerHTML; });
Basically iterate through the children property of document fragment and concatenate the outerHTMLs of its elements. 基本上遍历文档片段的children属性,并连接其元素的externalHTML。 :)
:)
If f
is a documentFragment, its innerHTML
can be retrieved using: 如果
f
是documentFragment,则可以使用以下方法检索其innerHTML
:
console.log([].map.call(f.children, e => e.outerHTML).join('\n'));
Note that map
is not a method of f.children
. 注意
map
不是f.children
的方法。 As a result, the following code doesn't work: 结果,以下代码不起作用:
console.log(f.children.map(e => e.outerHTML).join('\n'));
I have come across this sort of problem previously, and I came to the conclusion that a document fragment is easier to work with when it has a single, top-level node. 我以前曾遇到过此类问题,得出的结论是,只有一个顶级节点时,文档片段更易于使用。 With that in mind, I would probably use a known 'container' element inside the document fragment, and then set and retrieve the innerHTML of that.
考虑到这一点,我可能会在文档片段中使用一个已知的“容器”元素,然后设置和检索该元素的innerHTML。
Something like this: 像这样:
var fragment = document.createDocumentFragment(); //Initialise the fragment
fragment.appendChild(document.createElement('div')); //Create a top-level container element.
fragment.firstChild.innerHTML = 'Your chunk of DOM'; // Set the contents of your fragment, either with innerHTML, or by appending the child node.
console.log(fragment.firstChild.innerHTML); //Use any normal DOM node method to access the contents.
Basically you always use fragment.firstChild
to access the contents of your fragment, so you have access to all of a DOM node's usual methods. 基本上,您始终使用
fragment.firstChild
来访问fragment.firstChild
的内容,因此您可以访问所有DOM节点的常用方法。
I find that element.childNodes
have is forEach
method 我发现
element.childNodes
具有的是forEach
方法
so we can use that for clean the experience a little 所以我们可以用它来清洁一点经验
var $frag = new DocumentFragment();
var html = '' ;
$frag.childNodes.forEach( function(el) {
html += el.outerHTML;
});
Or EC6 shorted 或EC6短路
const innerHTML = [...$frag.childNodes].map( n=> n.outerHTML ).join('\n')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.