skip to Main Content

I am looking for a way to replace multiple strings in the same div that has the class name "information". This div appears multiple times on the page and I would like it to work in each instance.

I have managed find a way to achieve with the code below, however this way seems most likely very clunky.

Is there a way to condense this so it doesnt repeat so much and can check by class, then replace each string required?

<script>
var elements = document.getElementsByClassName('information');
for (var i = 0; i < elements.length; i++) {
    var str = elements[i].innerHTML;
    var pages = str.replace(" pages", "&nbsp;pp.");
    elements[i].innerHTML = pages;
}

var elements = document.getElementsByClassName('information');
for (var i = 0; i < elements.length; i++) {
    var str = elements[i].innerHTML;
    var page = str.replace(" page", "&nbsp;p.");
    elements[i].innerHTML = page;
}

var elements = document.getElementsByClassName('information');
for (var i = 0; i < elements.length; i++) {
    var str = elements[i].innerHTML;
    var colours = str.replace("colour &amp; ", "colour&nbsp;&amp;&nbsp;");
    elements[i].innerHTML = colours;
}

var elements = document.getElementsByClassName('information');
for (var i = 0; i < elements.length; i++) {
    var str = elements[i].innerHTML;
    var illustrations = str.replace(" ill", "&nbsp;ill");
    elements[i].innerHTML = illustrations;
}

var elements = document.getElementsByClassName('information');
for (var i = 0; i < elements.length; i++) {
    var str = elements[i].innerHTML;
    var multiplication = str.replace(" × ", "&nbsp;×&nbsp;");
    elements[i].innerHTML = multiplication;
}

var elements = document.getElementsByClassName('information');
for (var i = 0; i < elements.length; i++) {
    var str = elements[i].innerHTML;
    var cm = str.replace(" cm", "&nbsp;cm");
    elements[i].innerHTML = cm;
}

var elements = document.getElementsByClassName('information');
for (var i = 0; i < elements.length; i++) {
    var str = elements[i].innerHTML;
    var langauge = str.replace(" / ", "&ThinSpace;/&ThinSpace;");
    elements[i].innerHTML = langauge;
}
</script>

3

Answers


  1. Yes, just repeat str = str.replace... for each pattern:

    var elements = document.getElementsByClassName('information');
    for (var i = 0; i < elements.length; i++) {
        var str = elements[i].innerHTML;
    
        str = str.replace(" pages", "&nbsp;pp.");
        str = str.replace(" page", "&nbsp;p.");
        str = str.replace(" page", "&nbsp;p.");
        str = str.replace("colour &amp; ", "colour&nbsp;&amp;&nbsp;");
        //....etc
        
        elements[i].innerHTML = str;
    }
    

    Also, you most probably want replaceAll, not just replace.

    Login or Signup to reply.
  2. For my answer, I created an array of the changes, each element having two elements the first being what is replaced and the second is what will replace it.

    Then I simply loop through the elements using a forEach and through the array and use each element to replace on innerHTML.

    const els = document.querySelectorAll(".information");
    const changes = [
      [" pages", "&nbsp;pp."],
      [" page", "&nbsp;p."],
      ["colour &amp; ", "colour&nbsp;&amp;&nbsp;"],
      [" ill", "&nbsp;ill"],
      [" × ", "&nbsp;×&nbsp;"],
      [" cm", "&nbsp;cm"],
      [" / ", "&ThinSpace;/&ThinSpace;"]
    ]
    
    els.forEach((el) => {
      changes.forEach((ch) => el.innerHTML = el.innerHTML.replaceAll(ch[0],ch[1]))
    });
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information"> pages &nbsp; ill test x / </div>
    <div class="information"> page &nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / ggggg</div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    <div class="information">&nbsp; ill test x / </div>
    Login or Signup to reply.
  3. RegExp?

    You can use regex to replace specific string patterns, it looks like this:

    for (const element of document.getElementsByClassName('information')) {
      element.innerHTML = element.innerHTML
        .replace(/( pages)/, '&nbsp;pp.')
        .replace(/( page)/, '&nbsp;p.')
        .replace(/(colour.[&;amp]*)/, 'colour&nbsp;&amp;&nbsp;')
        .replace(/( ill)/, '&nbsp;ill')
        .replace(/( x ?)/, '&nbsp;×&nbsp;')
        .replace(/( cm)/, '&nbsp;cm')
        .replace(/( / )/, '&ThinSpace;/&ThinSpace;')
    }
    body {
      background: transparent;
      color: #fcbe24;
      padding: 0 24px;
      margin: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-family: sans-serif;
    }
    <div class="information"> pages</div>
    <div class="information"> page</div>
    <div class="information">colour &amp; </div>
    <div class="information"> ill</div>
    <div class="information"> x </div>
    <div class="information"> cm</div>
    <div class="information"> / </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search