Replace text with blank if value is empty

Question

I am using a regular replace call, but I want it to also replace the whole part of the text with blank/empty space if nothing is entered in the input(data) area. Here is the code and jsfiddle example: https://jsfiddle.net/6rhfdmfa/

Here is the div with input areas from which it gets the data:

<div id="wrap">
    <div id="inputmeasurements">
        <p id="topmeasurement" align=left>
            <input type="text" class="topm" id="title" name="title" maxlength="80" placeholder="TITLE"><span id="counter"></span>

            <br>
            <input type="text" class="topm" id="specifics" name="specifics" placeholder="Specifics">
            <br>
            <input type="text" class="topm" id="supplier" name="supplier" placeholder="Supplier">
            <br>
            <input type="text" class="topm" id="date" name="date" placeholder="Date">
            <br>
            <input type="text" class="topm" id="weight" name="weight" placeholder="Weight">
            <br>
            <textarea class="topm" id="mercedes" placeholder="Enter Any Aditional Data Here"></textarea>
            <br>
            <br>
        </p>
        <p id="botmeasurement">
            <input type="text" class="botm" id="bust" name="bust">&nbsp;Bust
            <br>
            <input type="text" class="botm" id="waist" name="waist">&nbsp;Waist
            <br>
            <input type="text" class="botm" id="hips" name="hips">&nbsp;Hips
            <br>
            <input type="text" class="botm" id="lng" name="lenght">&nbsp;Lenght
            <br>
            <input type="text" class="botm" id="shl" name="shoulders">&nbsp;Shoulders
            <br>
            <input type="text" class="botm" id="slv" name="sleeves">&nbsp;Sleeves
            <br>
            <input type="text" class="botm" id="ins" name="inseam">&nbsp;Inseam
            <br>
        </p>
        <div id="enter-meta-wrap">
            <p style="text-align: center;">Convert data to html ready metadata:</p>
            <button id="enter-meta" onclick="myFunction2();switchVisible();">Convert</button>
        </div>
    </div>

This is where it will get entered:

<div id="finishedmeasurements" style="display:none;">
    <table id="grid" cellspacing="0" cellpadding="0">
        <tr onclick="clipboard(this);">
            <td>
                <p id="m1" align=center>TITLE&lt;/br&gt;
                    <br>SPECIFICS&lt;/br&gt;
                    <br>SUPPLIER | DATE | WT WEIGHT&lt;/br&gt;
                    <br>MERC&lt;/br&gt;
                    <br>
                    <br>B1 Bust inches flat&lt;/br&gt;
                    <br>W1 Waist inches flat&lt;/br&gt;
                    <br>H1 Hips inches flat&lt;/br&gt;
                    <br>L1 Length &lt;/br&gt;
                    <br>S1 Shoulders &lt;/br&gt;
                    <br>S2 Sleeves &lt;/br&gt;
                    <br>I1 Inseam &lt;/br&gt;
                    <br>
                </p>
            </td>
        </tr>
    </table>
    <div id="new-meta-wrap">
        <p style="text-align: center;">Convert new data:</p>
        <button id="new-meta" onclick="myFunction3()">New</button>
    </div>
</div>

Current replace call:

//Convert input into formated metadata

function myFunction2() {
    var str = document.getElementById("m1").innerHTML; 
    var res = str.replace(/B1/g, document.getElementById("bust").value).replace(/W1/g, document.getElementById("waist").value).replace(/H1/g, document.getElementById("hips").value).replace(/L1/g,document.getElementById("lng").value)
    .replace(/S1/g, document.getElementById("shl").value).replace(/S2/g, document.getElementById("slv").value).replace(/I1/g, document.getElementById("ins").value)
    .replace("TITLE", document.getElementById("title").value).replace("SPECIFICS", document.getElementById("specifics").value).replace("MERC", document.getElementById("mercedes").value)
    .replace("SUPPLIER", document.getElementById("supplier").value).replace("DATE", document.getElementById("date").value).replace("WEIGHT", document.getElementById("weight").value);
    document.getElementById("m1").innerHTML = res;
}

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

Please check for all html elements of type 'text' and then check their value if all empty then you can display as per your requirement.

Please refer Find all text nodes for searching all text nodes in html using javascript

edited May 23 '17 at 12:21

Community

1
1

answered Aug 06 '15 at 13:28

csarathe

420
1
5
12

I am sorry, but I am not so savvy with javascript, so I am really stuck on how to make this work – iamx Aug 06 '15 at 14:45
Thank you for pointing me in the right direction, in a way you've helped me get to my solution! :) – iamx Aug 11 '15 at 21:23
Glad to hear , You are encouraged to accept answer. – csarathe Aug 16 '15 at 18:56

score 0 · Accepted Answer · answered Aug 07 '15 at 14:00

Found the solution with the help of a few people, so I changed my old replace call in javascript with this:

function myFunction5() {
  var m1 = document.getElementById("m1")
  var str = m1.innerHTML
  var fields = [
    { regex: /B1/g, id:"bust"},
    { regex: /W1/g, id:"waist"},
    { regex: /H1/g, id:"hips"},
    { regex: /L1/g, id:"lng"},
    { regex: /S1/g, id:"shl"},
    { regex: /S2/g, id:"slv"},
    { regex: /I1/g, id:"ins"},
    { regex: /TITLE/g, id:"title"},
    { regex: /SPECIFICS/g, id:"specifics"},
    { regex: /MERC/g, id:"mercedes"},
    { regex: /SUPPLIER/g, id:"supplier"},
    { regex: /DATE/g, id:"date"},
    { regex: /WEIGHT/g, id:"weight"}]

  for (o of fields){
    var val = document.getElementById(o.id).value
    if (val != "")
      str = str.replace(o.regex, val)
    else // remove line
      str = str.replace(
        new RegExp("\\s+"+(typeof o.regex=='string'?o.regex:o.regex.source)+".*?\n")
        ,'')
  }
  m1.innerHTML = str;
}

Replace text with blank if value is empty

2 Answers2