How to change sibling text of element without changing html using jQuery?

Question

I'm trying to replace text only, but without touching any other tags.

<p>
    <a href="login.php">
        <i class="fa fa-sign-in"></i> 
        Login
    </a>
</p>

$('p').each(function() {
    $(this).text($(this).text.replace('Login', 'Anmeldung')); 
});

Bad result:

<p>
    Anmeldung       
</p>

Result as I would like it to be:

<p>
    <a href="login.php">
        <i class="fa fa-sign-in"></i> 
        Anmeldung
    </a>
</p>

How can I do this? This is only a sample, deeper structure of p tags can be completely different.

If the only element you can select is the `p` you will need to recurse through the child elements and nodes and replace the `text()` within that element directly. Replacing the `text()` of the parent will have the effect of removing the HTML — Rory McCrossan, Sep 21 '16 at 10:17
Possible duplicate of [JQuery change inner text but preserve html](http://stackoverflow.com/questions/5232862/jquery-change-inner-text-but-preserve-html) — BadHorsie, Sep 21 '16 at 10:18
Why only with jQuery? It's almost like you don't know that jQuery isn't a language... — evolutionxbox, Sep 21 '16 at 10:37
@evolutionxbox jQuery is great for operations on the DOM. Why should he use a more complex solution with vanilla js if he's using jQuery in his application anyway? — Kilian Stinson, Sep 21 '16 at 10:57
@KilianStinson - see http://stackoverflow.com/a/39613834/989920 — evolutionxbox, Sep 21 '16 at 11:00
@evolutionxbox The answer you linked is using jQuery as solution and is wrong anyway. What's your point? — Kilian Stinson, Sep 21 '16 at 11:12

score 2 · Answer 1 · answered Sep 21 '16 at 10:19

2

Wrap text you want to replace in a span or something.

<p>
    <a href="login.php">
        <i class="fa fa-sign-in"></i> 
        <span class="replace-login">Login</span>
    </a>
</p>

and js

    $('.replace-login').each(function() {
       $(this).text($(this).text.replace('Login', 'Anmeldung')); 
   });

answered Sep 21 '16 at 10:19

Andrei Todorut

4,260
2
17
28

Thanks, but I'm looking for a solution without changing the HTML. Because this would be a lot of work! – user3532637 Sep 21 '16 at 10:26

Kilian Stinson · Accepted Answer · 2016-09-21T10:51:34.897

2

Use .html() instead of .text()
This preserves your html tags

$('p').each(function() {
    $(this).html($(this).html().replace('Login', 'Anmeldung')); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <a href="login.php">
        <i class="fa fa-sign-in"></i> 
        Login
    </a>
</p>

Fiddle using your example.

edited Sep 21 '16 at 10:51

answered Sep 21 '16 at 10:22

Kilian Stinson

2,376
28
33

Mohammad · Answer 3 · 2016-09-21T10:28:56.630

If you want to change all text sibling of i, select i tag in p and use Node.nextSibling property to selecting sibling text after element and change it.

$("p > a > i")[0].nextSibling.nodeValue = "Anmeldung";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <a href="login.php">
        <i class="fa fa-sign-in"></i> 
        Login
    </a>
</p>

But if you want to replace part of text, use this code

$("p > a").html(function(i, html){
    return html.replace("Login", "Anmeldung");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <a href="login.php">
        <i class="fa fa-sign-in"></i> 
        Login
    </a>
</p>

The structure inside `p` is not given. It is just an example so your solution won't work. — Kilian Stinson, Sep 21 '16 at 10:45

score 0 · Answer 4 · edited Sep 21 '16 at 12:23

0

<p>
  <a href="login.php">
    <i class="fa fa-sign-in"></i> 
    Login
  </a>
</p>

$('p').each(function() {
  $(this).find("a").text($(this).find("a").text.replace('Login', 'Anmeldung')); 
});

edited Sep 21 '16 at 12:23

Munawir

3,346
9
33
51

answered Sep 21 '16 at 10:17

Mustapha Larhrouch

3,373
3
14
28

`This is only a sample, deeper structure of p tags can be completely different.`. Also your code will wipe out the `i` in the `a` – Rory McCrossan Sep 21 '16 at 10:18
what about tag ? – Andrei Todorut Sep 21 '16 at 10:20

score 0 · Answer 5 · answered Sep 21 '16 at 10:21

0

You can try this DEMO LINK HERE

<p>
    <a href="login.php">
        <i class="fa fa-sign-in"></i> 
        Login
    </a>
</p>

JS..

$('p').each(function() {
    $(this).html($(this).html().replace('Login', 'Anmeldung')); 
});

http://jsfiddle.net/hnfRe/402/

answered Sep 21 '16 at 10:21

Md Rahman

1,812
1
14
15

Can you include the fiddle into you answer, rather than linking offsite? – evolutionxbox Sep 21 '16 at 10:38

score 0 · Answer 6 · answered Sep 21 '16 at 10:22

0

use html instead of text function. . .

$('p').html($(this).html().replace('Login', 'Anmeldung'));

answered Sep 21 '16 at 10:22

Ravikiran kalal

1,050
8
11

How to change sibling text of element without changing html using jQuery?

6 Answers6

Linked

Related