我有 div [contenteditable=true]。文本可以是粗体/斜体/下划线。
<div contenteditable=true>
<b>Text</b>
</div>
我需要将文本节点拆分为 2 个块:。
<div contenteditable=true>
<b>Te</b><b>xt</b>
</div>
仅适用于 Chrome 和 Safari。
我有 div [contenteditable=true]。文本可以是粗体/斜体/下划线。
<div contenteditable=true>
<b>Text</b>
</div>
我需要将文本节点拆分为 2 个块:。
<div contenteditable=true>
<b>Te</b><b>xt</b>
</div>
仅适用于 Chrome 和 Safari。
var b = document.querySelectorAll("div[contenteditable='true'] > *")[0];
var p = b.parentNode; // the element's parent
var t = b.firstChild; // the textNode content
var newText = t.splitText(2); // splits the node, leaving it in place
var copy = document.createElement(b.tagName); // make another wrapper
copy.appendChild(b.lastChild); // move second text into the copy
p.insertBefore(copy, b.nextSibling); // put the copy into the DOM.
见http://jsfiddle.net/alnitak/JbEnL/
当您指定 Chrome 和 Safari 时,我已经习惯于querySelectorAll
查找初始的内部 DOM 元素。
这是一种获取 div 中第一个粗体标签的方法,并将其中的文本拆分为两个粗体标签:
初始 HTML:
<div id="target" contenteditable=true>
<b>Text</b>
</div>
代码:
var bold = document.getElementById("target").getElementsByTagName("b")[0];
var txt = bold.innerHTML;
bold.innerHTML = txt.substr(0,2);
var newBold = document.createElement("b");
newBold.innerHTML = txt.substr(2);
bold.parentNode.insertBefore(newBold, bold.nextSibling);
工作演示:http: //jsfiddle.net/jfriend00/KsPrg/
</p>