替換不在DOM元素內部的文本

在我的工作中，我遇到了這個問題，在contenteditable內部，我需要替換不在DOM元素內部的文本。只是一個純文本或文本節點。我得到了window.getSelection();的textNode，我需要替換文本。替換不在DOM元素內部的文本

我真的不想用替換或正則表達式來替換文本元素。

有人可以幫忙嗎？

示例代碼在這裏：

$('#editable').click(function($e){ 
 
    let sel = window.getSelection(); 
 
    if(sel.type === "Caret" && sel.focusNode.data !== undefined && $e.originalEvent.type == "click"){ 
 
    \t let el = (sel.anchorNode.parentElement.childNodes.length < 2 && sel.anchorNode.parentElement !== this) ? sel.anchorNode.parentElement : false; 
 
     if(el) el.innerHTML = '<span style="color:red;">Got you!</span>'; 
 
     else alert(sel.anchorNode.parentElement.innerHTML); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Example, click the text to replace:</p> 
 

 
<div id="editable" contenteditable="true" style="border:1px solid #ccc; padding:4px;">You can't get me <strong id="item1">You can get me</strong> You can't get me 
 
<div>You can't get me <strong id="item1">You can get me</strong> You can't get me</div></div>

這裏是Tryit編輯器相同的示例代碼，複製問題，如果你看中的是：https://www.w3schools.com/code/tryit.asp?filename=FKMLYB0T48VC

來源

2017-10-18 Tarmo Saluste

「我真的不想跟_replace_或正則表達式去與一個元素替換文本「。謹慎闡述？ – OptimusCrime

當然，這意味着我不想從全局文本中搜索相似的文本。如果您不知道需要替換的確切文本位置，則可以在其他位置替換類似的文本。我也從我的同事那裏得到了一個很好的解決方案，我正在研究它。 –

我現在有解決方案。

我發現，可以有針對性的進行編輯從window.getSelection();方法的所有子元素的父元素替換有針對性的文字是週期低谷的所有元素，並比較prevElement如果文字是一些DOM之後和之前的一些nextElement如果DOM。

這裏是爲那些誰堅持同樣的問題，工作樣例：

$('#editable').click(function($e){ 
 
    let sel = window.getSelection(); 
 
    if(sel.type === "Caret" && sel.focusNode.data !== undefined && $e.originalEvent.type == "click"){ 
 
    console.log(sel) 
 
    \t let el = (sel.anchorNode.parentElement.childNodes.length < 2 && sel.anchorNode.parentElement !== this) ? sel.anchorNode.parentElement : false; 
 
     if(!el){ 
 
     
 
      let buf = false; 
 
      if(sel.focusNode.nextSibling){ 
 
       let cn = sel.focusNode.parentElement.childNodes; 
 
       for(i in cn){ 
 
        if(cn[i] == sel.focusNode.nextSibling){ 
 
         $('<span style="color:red;">Got you!</span>').insertAfter(buf); 
 
         buf.data = ''; 
 
        } 
 
        else{ 
 
         buf = cn[i]; 
 
        } 
 
       } 
 
      } 
 
      else if(sel.focusNode.previousSibling){ 
 
       let cn = sel.focusNode.parentElement.childNodes; 
 
       for(i in cn){ 
 
        if(buf){ 
 
         $('<span style="color:red;">Got you!</span>').insertAfter(cn[i]); 
 
         cn[i].data = ''; 
 
         buf = false; 
 
        } 
 
        else if(cn[i] == sel.focusNode.previousSibling){ 
 
         buf = true; 
 
        } 
 
       } 
 
      } 
 
      
 
     } 
 
     else el.innerHTML = '<span style="color:red;">Got you!</span>'; 
 
    } 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Example, click the text to replace:</p> 
 

 
<div id="editable" contenteditable="true" style="border:1px solid #ccc; padding:4px;">You can't get me <strong id="item1">You can get me</strong> You can't get me 
 
<div>You can't get me <strong id="item1">You can get me</strong> You can't get me</div></div>

來源

2017-10-23 14:27:34

替換不在DOM元素內部的文本

回答

相關問題