Javascript - How to replace a simple string

Question

I have tried every variation to replace the string, "sub events" with "selected. I haven't touched "sub events" yet but have affected everything around it.

This hid everything after it:

<script type="text/javascript">
$(function(){
$("div[class$=registrationDetails] > ul > li").text(function(){
     var str = $(this).text("and the sub events").str.replace("sub events", "selected");
});
});
</script>

I tried the W3 School method, which I also found on another StackOverflow post, and it did nothing. This is the most basic form I tried with this method.

<script type="text/javascript">
var str1 = "and the sub events";
var str2 = str1.replace("sub events", "selected");
</script>

It seems so close yet won't just replace as it should. Thanks.

Do not use [class$=registrationDetails] when looking for an element with a class. Use div.registrationDetails — epascarello
– epascarello, Commented Jan 28, 2020 at 23:17
Your problem is the use of jQuery is wrong. Is the text in the page already? — epascarello
– epascarello, Commented Jan 28, 2020 at 23:19
What result are you expecting after you have replaced the string? — Jay
– Jay, Commented Jan 28, 2020 at 23:22
Your guidance is appreciated! I switched to use the div.registrationDetails and that does target the correct section. I have another script on the page removing some dates just below the place where I want the outcome to say "selected" instead of "sub events". The page with no changes to it looks like this: — ccllraabla
– ccllraabla, Commented Jan 29, 2020 at 15:24
<div class="panel-body registrationDetails"> will be registered for <strong> Hospitality Volunteer Oportunities</strong> <ul style="list-style: none;"> <li>and the sub events <ul> <li>6/30/2020 9:00 AM - 10:00 AM : Volunteer at North Campus</li> <li>6/30/2020 1:00 PM - 2:00 PM : Volunteer at South Campus</li> </ul> </li> </ul> — ccllraabla
– ccllraabla, Commented Jan 29, 2020 at 15:27

Carl Edwards · Accepted Answer · 2020-01-28 23:36:57Z

1

First revise how you're returning your value in the callback and replace as so. This is all assuming that the <li /> has the text you're looking to replace.

$(function(){
  $("div[class$=registrationDetails] > ul > li").text(function() {
    return this.innerText.replace("sub events", "selected");
  });
});

edited Jan 28, 2020 at 23:36

answered Jan 28, 2020 at 23:22

Carl Edwards

14.6k12 gold badges70 silver badges131 bronze badges

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

Comments

Paras Babbar · Accepted Answer · 2020-01-28 23:30:29Z

0

This thing worked for me.

var str1 = "and the sub events";

str1 = str1.replace("sub events", "selected")

console.log(str1)

Output -

[Running] node "..\test.js" and the selected

answered Jan 28, 2020 at 23:30

Paras Babbar

11 bronze badge

Comments

epascarello · Accepted Answer · 2020-01-28 23:35:34Z

0

Here is a way to do what you want with a each loop. Used a if statement to look to see if the match is there

$(function() {
  // select the class with a dot, not attribute selector
  $("div.registrationDetails > ul > li").each(
    function() {
      /// read text
      var text = $(this).text()
      // check if text is there
      if (text.includes('sub events')) {
        // if it is replace
        var str = text.replace('sub events', 'selected')
        //update the element
        $(this).text(str) 
      // another change
      } else if (text.includes('selected')) { 
        var str = text.replace('selected', 'sub events')
        $(this).text(str) 
      }
    }
  );
})

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


<div class="registrationDetails">
  <ul>
    <li>foo bar sub events</li>
    <li>other selected</li>
  </ul>
</div>

There are other ways to do this, but this is a basic step in what you were trying to do.

A more complicated way to do it is with text and a reg exp with replace.

// called by the replace method
// returns the opposite of what was matched
function replacerFnc (match) {
  return match==="sub events" ? "selected" : "sub events"
}

// What is called by jQuery's text method
function replacement(index, text) {
  // regular expression with groups to match either one of the strings
  var re = /(sub events|selected)/
  // use the reg exp and replace the string
  return text.replace(re, replacerFnc)
}

// basic jQuery code to select the lis and set the text
$(function() {
  $("div.registrationDetails > ul > li").text(replacement);
})

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


<div class="registrationDetails">
  <ul>
    <li>foo bar sub events</li>
    <li>other selected</li>
  </ul>
</div>

edited Jan 28, 2020 at 23:35

answered Jan 28, 2020 at 23:29

epascarello

208k20 gold badges206 silver badges246 bronze badges

2 Comments

ccllraabla Over a year ago

The top suggestion you provided came very close to working. I have generated the same outcome with a similar script. The issue is that the list below "sub events" loses its formatting and the options selected end up on the same line with the replaced text "selected". I am hoping to preserve the bulleted list under the "selected" line. I can't grab "sub events" and preserve the formatting.

ccllraabla Over a year ago

your solution worked to replace the text and straightened me out on selecting the class. I found the way to replace the text and maintain the html list formatting and wanted to note it for the next person. <script type="text/javascript"> $('div.registrationDetails > ul > li').html(function(i, htm){ return htm.replace(/sub events/, 'selected'); }); </script>

ccllraabla · Accepted Answer · 2020-02-07 17:22:05Z

0

I found the script to replace the text and maintain the html list formatting.

<script type="text/javascript">
$('div.registrationDetails > ul > li').html(function(i, htm){
    return htm.replace(/sub events/, 'selected');
});
</script>

answered Feb 7, 2020 at 17:22

ccllraabla

276 bronze badges

Collectives™ on Stack Overflow

Javascript - How to replace a simple string

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related