Question

在我的工作中，我遇到了这个问题，在一个令人满意的内部，我需要替换不在DOM元素内的文本。只是一个裸文本或文本节点。我正在使用window.getSelection();获取textNode，我需要替换文本。

我真的不想使用replace或regex用元素替换该文本。

有人可以帮忙吗？

示例代码：

$('#editable').click(function($e){
    let sel = window.getSelection();
    if(sel.type === "Caret" && sel.focusNode.data !== undefined && $e.originalEvent.type == "click"){
    	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 Editor中用于复制问题的相同示例代码，如果您喜欢这样：https://www.w3schools.com/code/tryit.asp?filename=FKMLYB0T48VC

Answer 1

我现在有了解决方案。

我发现父元素包含可以从window.getSelection();进行编辑的所有子元素。替换目标文本的方法是循环使用所有元素并比较prevElement如果文本在后面一些DOM和nextElement如果在某些DOM之前。

以下是那些遇到同样问题的人的工作样本：

＆＃13;

$('#editable').click(function($e){
    let sel = window.getSelection();
    if(sel.type === "Caret" && sel.focusNode.data !== undefined && $e.originalEvent.type == "click"){
    console.log(sel)
    	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>';
    }
    
    
});

＆＃13;

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

＆＃13;

替换不在DOM元素

1 个答案: