我想在按键上将 contenteditable 的内容分成两部分。
<div contenteditable="true">This is <b>my content</b></div>
我想得到这句话的子串(不含HTML)从0到10,即:
这是我的
有没有办法在 JS 中做到这一点,它知道关闭将被切断的标签?或者我是否需要编写一个函数来确定节点并手动关闭它?
我想返回:
This is <b>my</b>
和
<b> content</b>
这是检索插入符号左侧的代码:
traverse = ( node: Node, selectedNode: Node, offset, direction = 0, parent = true ) => {
if ( node.nodeName === '#text' ) {
if ( node.isEqualNode( selectedNode ) ) {
return [ node.textContent.substr( 0, offset ), node.textContent.substr( offset ) ];
}
return node.textContent;
}
if ( node.childNodes.length === 1 && node.childNodes[0].nodeType === 3 ) {
if ( node.childNodes[0].isEqualNode( selectedNode ) ) {
const newNode1 = node.cloneNode();
const newNode2 = node.cloneNode();
newNode1.innerHTML = node.childNodes[0].textContent.substr( 0, offset );
newNode2.innerHTML = node.childNodes[0].textContent.substr( offset );
return [ newNode1.outerHTML, newNode2.outerHTML ];
}
return node.outerHTML;
}
if ( node.childNodes.length > 1 ) {
let content = '';
let found = false;
for ( let x = 0; node.childNodes[x] && !found; x++ ) {
let resp = this.traverse( node.childNodes[x], selectedNode, offset, direction, false );
if ( Array.isArray( resp ) ) {
content += resp[0];
found = true;
} else {
content += resp;
}
}
if ( !parent ) {
const newNode = node.cloneNode();
newNode.innerHTML = content;
return newNode.outerHTML;
} else {
return content;
}
}
}
好吧,经过大量的反复试验,我想通了。此函数接受一个元素或节点、所选节点和所选节点的偏移量,并将返回两个 HTML 字符串,该字符串分成两半,并带有正确关闭的标签。
traverse = ( node: Node, selectedNode: Node, offset, parent = true ) => {
let found = false;
if ( node.nodeName === '#text' ) {
if ( node.isEqualNode( selectedNode ) ) {
return [ node.textContent.substr( 0, offset ), node.textContent.substr( offset ) ];
}
return node.textContent;
}
if ( node.childNodes.length === 1 && node.childNodes[0].nodeType === 3 ) {
if ( node.childNodes[0].isEqualNode( selectedNode ) ) {
const newNode1 = node.cloneNode();
const newNode2 = node.cloneNode();
newNode1.innerHTML = node.childNodes[0].textContent.substr( 0, offset );
newNode2.innerHTML = node.childNodes[0].textContent.substr( offset );
return [ newNode1.outerHTML, newNode2.outerHTML ];
}
return node.outerHTML;
}
if ( node.childNodes.length > 1 ) {
let content = ['', ''];
for ( let x = 0; node.childNodes[x]; x++ ) {
const resp = this.traverse( node.childNodes[x], selectedNode, offset, false );
if ( Array.isArray( resp ) ) {
content[0] += resp[0];
content[1] += resp[1];
found = true;
} else {
if ( found ) {
content[1] += resp;
} else {
content[0] += resp;
}
}
}
if ( !parent ) {
const newNode1 = node.cloneNode();
const newNode2 = node.cloneNode();
newNode1.innerHTML = content[0];
newNode2.innerHTML = content[1];
if ( found ) {
return [ newNode1.outerHTML, newNode2.outerHTML ];
} else {
return newNode1.outerHTML;
}
} else {
if ( found ) {
return content;
} else {
return content[0];
}
}
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句