javascript - 将 nextSibling 替换为其他字符串

Question

我有以下 span 元素:

<div class="text" contenteditable="true" id="example">
   <div class="outside">Type here <span class="inside"> please</span>.</div>
   <div class="outside">Name here <span class="inside"> first </span>name</div>
</div>

使用下面的js函数，我可以获得</span>之间的长度和</div> :

$('span.inside').each(function() {               
    var sphs = $(this).get(0).nextSibling;
    var len = sphs.length;

    //If the length is less than 2
    if(len < 2){
        // i want to replace it with another words like "thanks."   

       }
 })

如果长度小于8，那么我想在 thanks. 之间将其替换为其他单词或字符串(例如 </span> )和</div> (参见“感谢”一词的放置)。

<div class="text" contenteditable="true" id="example">
   <div class="outside">Type here <span class="inside"> please</span>thanks.</div>
</div>

如何用另一个字符串替换它？

编辑:

请注意，我正在使用 .each因为可能有多个具有相同类名的 span 元素。在第一行中，只有一个句点( </span>.</div> )，因此它满足条件，并将被另一个单词替换(在本例中为“thanks”)。

第二行( </span>name</div> )的长度大于2，因此不会被替换。

我希望这能澄清这一点。

<div class="text" contenteditable="true" id="example">
   <div class="outside">Type here <span class="inside"> please</span>.</div>
   <div class="outside">Name here <span class="inside"> first </span>name</div>
</div>

...将成为...

<div class="text" contenteditable="true" id="example">
   <div class="outside">Type here <span class="inside"> please</span> thanks.</div>
   <div class="outside">Name here <span class="inside"> first </span>name</div>
</div>

Answer 1

$('span.inside').each(function() {               
    var sphs = $(this).get(0).nextSibling;
    var len = sphs.length;

    //If the length is less than 2
    if(len < 2){
        // DOM method:
        sphs.textContent = ' Thanks.';
        // jQuery method:
        $(this).parent().get(0).childNodes[2].textContent = ' Thanks.';
    }
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="text" contenteditable="true" id="example">
   <div class="outside">Type here <span class="inside"> please</span>.</div>
   <div class="outside">Type here <span class="inside"> please</span> ok?</div>
</div>

或者在这里尝试 https://jsfiddle.net/8pa4akzh/3/