Replace text during input change with jQuery

Question

I'm trying to replace text every time I've an input change.

Here's an example: https://jsfiddle.net/ewdp3Lnr/

$("[name='replacer']").on('change paste keyup', function() {
    PRO_Content = $('#content').html();
    PRO_Content = PRO_Content.replace('####', $("[name='replacer']").val());
    $('#content').html(PRO_Content);
});

It's working but only for the first change detected.

But not for the second, third, ...

Could you point me in the right direction?

Thanks.

your first value goes in a circle. here - PRO_Content = $('# content').html(); — s.kuznetsov
– s.kuznetsov, Commented Jan 22, 2021 at 14:30

angel.bonev · Accepted Answer · 2021-01-22 14:39:50Z

1

Just get the content before any change and use the initial value. Don't rewrite the initial value because that will replace ####

var pattern = $('#content').html();
$("[name='replacer']").on('change paste keyup', function() {   
    PRO_Content = pattern.replace('####', $("[name='replacer']").val());
    $('#content').html(PRO_Content);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Put something here to replace the #### in the HTML code:<br>
<input type="text" name="replacer">

<hr>

<span id="content">
  <p>This man is <strong style="color:red">####</strong>.</p>
</span>

edited Jan 22, 2021 at 14:39

answered Jan 22, 2021 at 14:33

angel.bonev

2,2424 gold badges25 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ross Over a year ago

Thanks a lot. Last thing, if I have more than one '####' how can I proceed please?

angel.bonev Over a year ago

@Ross you need to use replaceAll

angel.bonev Over a year ago

For example:

let i = 0; let changes = ["first", "second"];  '#### something else ####'.replaceAll('####', () =>{ return changes[i++];});

angel.bonev Over a year ago

Hi @Ross if this or any answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this.

gaetanoM · Accepted Answer · 2021-01-22 19:07:03Z

0

You can simplify your code using .text( function ).

Moreover, instead of change and keyup evets you can use the input event.

The snippet:

var element = $('#content :contains("####")').filter((i,e) => e.textContent == '####');
$("[name='replacer']").on('input paste', function(e) {
    element.text(function(idx, text) {
        return e.target.value;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="text" name="replacer">

<hr>

<span id="content">
  <p>This man is <strong style="color:red">####</strong>.</p>
</span>

edited Jan 22, 2021 at 19:07

answered Jan 22, 2021 at 15:06

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

2 Comments

Ross Over a year ago

Hello, it's woking but I'm looking for a more customizable way. Actually your code it too much based on the HTML structure and not on the key (i.e.: ####).

gaetanoM Over a year ago

@Ross Snippet updated. Now I save the element where change the text content...... IN any case I don't see why use a replace. Let me know.

Collectives™ on Stack Overflow

Replace text during input change with jQuery

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related