javascript - テキストノードを分割

Question

div [contenteditable=true]があります。テキストは太字/斜体/下線にすることができます。

<div contenteditable=true>
  <b>Text</b>
</div>

テキストノードを2つのブロックに分割する必要があります。

<div contenteditable=true>
  <b>Te</b><b>xt</b>
</div>

ChromeとSafari専用です。

Answer 1

を見てくださいText.splitText。

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 要素を見つけるために使用しました。

Answer 2

divの最初の太字のタグを取得し、その中のテキストを2つの太字のタグに分割する方法は次のとおりです。

初期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>