は、私があれば、テキストは今</p> <pre><code><p>This is a random text<p> <p>Another random text<p> </code></pre> <p>であれば、複数のdivs.For例の上にまたがる選択したテキストの前後にテキストを配置しようとしていますジャバスクリプト

Question

に複数のdivの上にまたがる選択したテキストからテキストを終了し、起動置きます私が選択したテキストの前後にテキストを配置する方法を知っているが、私は終わるごとのpの前にテキストを挿入しない方法

<p>This hello world is a random text hello world<p> 
    <p>hello world Another random text hello world<p> 

ユーザーには2つのp tags.The出力からでなければなりません「別のランダムなテキストがランダムなテキストである」を選択します別の選択されたpタグの開始後。

function surroundSelection(textBefore, textAfter) { 
if (window.getSelection) {  
     var range = sel.getRangeAt(0); 
     var startNode = range.startContainer, startOffset = range.startOffset; 
     var boundaryRange = range.cloneRange(); 
     var startTextNode = document.createTextNode(textBefore); 
     var endTextNode = document.createTextNode(textAfter); 
     boundaryRange.collapse(false); 
     boundaryRange.insertNode(endTextNode); 
     boundaryRange.setStart(startNode, startOffset); 
     boundaryRange.collapse(true); 
     boundaryRange.insertNode(startTextNode); 

     // Reselect the original text 
     range.setStartBefore(startTextNode); 

     range.setEndAfter(endTextNode); 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    } 
} 

これは、タグに関係なく、選択したテキストの前後にテキストを追加するだけです。

Answer 1

Range.extractContentsを使用して選択を削除し、それをDocumentFragmentに追加することができます。その後、childrenをループすることができます。textContentを変更し、Range.insertNodeを使用して、それらを親要素に戻します。

ここは例です。

余分なクリーンアップ機能なしで、内容を抽出した後に空の上の空のp要素の上から親要素をクリーンアップしなければならなかった。 extractContentsのように見えるのは、テキストノードを抽出して空の要素をDOMに残すだけですが、間違っている可能性があります。

var btn = document.getElementsByTagName("button"); 
 

 
function cleanUpEmptyElem (collection, parent) { 
 
    collection.forEach(function(elem) { 
 
    if(elem.textContent.length < 1) { 
 
     parent.removeChild(elem); 
 
    } 
 
    }) 
 
} 
 

 
function surroundSelection (selection) { 
 
    var range = selection.getRangeAt(0); 
 
    if (range.commonAncestorContainer.nodeType !== 3) { 
 
    [].slice.call(range.extractContents().children).forEach(function(elem) { 
 
     elem.textContent = "Foo " + elem.textContent + " Bar"; 
 
     range.insertNode(elem); 
 
    }); 
 
    cleanUpEmptyElem([].slice.call(range.commonAncestorContainer.children), range.commonAncestorContainer) 
 
    } else { 
 
    range.commonAncestorContainer.parentElement.textContent = "Foo " + range.commonAncestorContainer.parentElement.textContent + " Bar"; 
 
    } 
 
    range.detach(); 
 
    selection.removeAllRanges(); 
 
} 
 

 

 
btn[0].addEventListener("click", function() { 
 
    if (window.getSelection && window.getSelection().rangeCount) { 
 
    surroundSelection(window.getSelection()); 
 
    } else { 
 
    console.log("either nothing is selected or window.getSelection is not available") 
 
    } 
 
}, false)

button { 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
}

<div> 
 
    <p>This is a random text</p> 
 
    <p>Another random text</p> 
 
    <p>More random text</p> 
 
    <p>Another random text</p> 
 
</div> 
 

 
<button>insert text in selected elements</button>