Question

我正在使用常规替换调用，但是如果在输入（数据）区域中没有输入任何内容，我希望它还用空白/空格替换文本的整个部分。这是代码和jsfiddle示例：https://jsfiddle.net/6rhfdmfa/

这是带有输入区域的div，它从中获取数据：

<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>

这是输入的地方：

<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>

当前替换电话：

//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;
}

Answer 1

请检查所有类型＆＃39; text＆＃39;的html元素。如果全部为空，则检查它们的值，然后根据您的要求显示。

请参阅Find all text nodes 使用javascript

搜索html中的所有文本节点

Answer 2

在几个人的帮助下找到了解决方案，所以我用javascript更改了旧的替换调用：

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;
}

如果值为空，则将文本替换为空白

2 个答案: