Replacing nextSibling with other string

Question

I have the following span element:

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

Using the following js function, I can get the length of in between </span> and </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."   

       }
 })

If the length is less than 8, then I want to replace it with another words or strings ( for example, thanks.) IN BETWEEN </span> and </div> (see the word "thanks" placement).

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

How would I replace it with another string?

EDIT:

Note that I am using .each as there could be multiple span element with the same class name. In the first line, there is only a period (</span>.</div>), thus it satisfies the condition and will be replaced with another word (in this case "thanks").

In the second line (</span>name</div>), the length is larger than 2, thus it won't get replaced.

I hope this clarifies it.

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

...will become...

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

`$('span.inside').length;` is the length of the jQuery object (so here always 1), not the length of the contents! — cFreed, Dec 13 '16 at 20:19
@cFreed I am aware of that. haha. Please look bit below `var len = sphs.length;`. — Steve Kim, Dec 13 '16 at 20:20
=) No worries. I guess the first portion wasn't necessary in this question. I am going to edit it out. — Steve Kim, Dec 13 '16 at 20:22

Yaroslav · Accepted Answer · 2016-12-13T20:48:09.820

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>

Or try here https://jsfiddle.net/8pa4akzh/3/

edited Dec 13 '16 at 20:48

answered Dec 13 '16 at 20:23

Yaroslav

651
2
9
17

This affects the `outside` element. I am trying to replace "`.`" with `Thanks`. – Steve Kim Dec 13 '16 at 20:30
Got it, check now – Yaroslav Dec 13 '16 at 20:37
Thanks! Really appreciate it! :) – Steve Kim Dec 13 '16 at 20:38
2

More simply: `sphs.textContent = ' Thanks.'; – cFreed Dec 13 '16 at 20:44
Updated, Thanks cFreed – Yaroslav Dec 13 '16 at 20:48
Why `$(this).get(0).nextSibling` and not `this.nextSibling`? – David Thomas Dec 13 '16 at 20:58
David Thomas, this part of code is not mine, I didn't changed it to be more recognizable clear for the author – Yaroslav Dec 13 '16 at 21:02

Fueled By Coffee · Answer 2 · 2016-12-13T20:31:53.017

0

Add an extra (empty) span and set it. It's as simple as setting the text() of the span.

HTML:

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

JS:

   //If the length is less than 2
   if(len < 2){
        $('span#extra').text("thanks.");
   }

edited Dec 13 '16 at 20:31

answered Dec 13 '16 at 20:17

Fueled By Coffee

2,467
7
29
43

This is inside of span element. I am trying to replace the word that is outside of the span element (in between `` and ``. – Steve Kim Dec 13 '16 at 20:18
@steveKim Are you looking to remove any text like the " please" or are you just trying to append "thanks."? – Fueled By Coffee Dec 13 '16 at 20:23
In this example, "please" is inside of the span. I am trying to add "Thanks." just outside of the span (but has to be in between '` and ``. Thus, anything inside of span will be untouched. – Steve Kim Dec 13 '16 at 20:25
Unfortunately no. Adding another element in between will make the code alot more complicated. Thus, I am trying to avoid it. I mean, I can use `substr` to just replace the whole thing. But I wanted to see if there was an easier way to just simply target the nextSibling area. – Steve Kim Dec 13 '16 at 20:28
Thank you for the updated answer. To make things even more complicated, there are multiple span elements inside with the same class name (Thus the usage of `.each`). The `.parent()` won't be an effective way. I will update the question to clarify, – Steve Kim Dec 13 '16 at 20:34

Replacing nextSibling with other string

2 Answers2