如果value为空,则将文本替换为空白
Replace text with blank if value is empty
我正在使用常规的替换调用,但我希望它也用空白/空白空间替换文本的整个部分,如果在输入(数据)区域中没有输入任何内容。下面是代码和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"> Bust
<br>
<input type="text" class="botm" id="waist" name="waist"> Waist
<br>
<input type="text" class="botm" id="hips" name="hips"> Hips
<br>
<input type="text" class="botm" id="lng" name="lenght"> Lenght
<br>
<input type="text" class="botm" id="shl" name="shoulders"> Shoulders
<br>
<input type="text" class="botm" id="slv" name="sleeves"> Sleeves
<br>
<input type="text" class="botm" id="ins" name="inseam"> 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</br>
<br>SPECIFICS</br>
<br>SUPPLIER | DATE | WT WEIGHT</br>
<br>MERC</br>
<br>
<br>B1 Bust inches flat</br>
<br>W1 Waist inches flat</br>
<br>H1 Hips inches flat</br>
<br>L1 Length </br>
<br>S1 Shoulders </br>
<br>S2 Sleeves </br>
<br>I1 Inseam </br>
<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;
}
请检查所有类型为" text "的html元素,然后检查它们的值,如果它们都为空,那么您可以根据您的要求显示
请参考查找所有文本节点使用javascript搜索HTML中的所有文本节点
在几个人的帮助下找到了解决方案,所以我改变了javascript中旧的replace调用:
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;
}
相关文章:
- 使用JavaScript将标题文本替换为按钮文本
- jQuery在用新文本替换HTML文本时淡出HTML文本,而不是仅显示
- CSS转换后用新内容替换空白
- 为什么不'使用此JavaScript将文本替换为不起作用的链接
- 将元素文本替换为子项中的值
- 使用 Jquery 将文本替换为笑脸图像
- 将页面上的文本替换为 jQuery 并提示文件下载
- 使用 JavaScript 将文本替换为图像
- 将 d3 演示中的圆圈和文本替换为包含自定义 HTML 和 ko 绑定的 foreignObject
- JavaScript无法用新文本替换文本
- 将表中的文本替换为用户友好的文本
- 将.onclick属性中的文本替换为javascript
- Javascript/Jquery.使用带通配符的正则表达式将纯文本替换为html
- 按名称将文本替换为 JavaScript 属性的内容
- 如何将 JSON 字符串中的文本替换为 Greasemonkey 的用户脚本
- Javascript:用文本替换整个锚点
- 在Chrome扩展程序中将文本替换为Treewalker
- 将不需要的页脚文本替换为空白区域
- 删除所有包含空白href的链接,并用Javascript中的文本替换它们
- 如果value为空,则将文本替换为空白