Question

如果您在HTML中有这样的简单内容：

<div class="main">Item 7,000</div>

如何让javascript在页面加载时为7,000部分（因为它的数字）应用html元素和类？对于这样的事情：

<div class="main">Item <span class="wrap">7,000</span></div>

或者只是一个html元素，如果不能上课的话。

道歉，我现在没有任何代码可以分享。我还在浏览其他问题。

如果$.isNumeric()为true然后应用元素，那么它可能应该是jQuery的东西吗？

Answer 1

会有边缘情况，但会实现你的目标

$(function () {
  $(".main").each(function (index, element) {
    var $element = $(element);
    var wrapped = $element.text().replace(/(.+?)((\d{1,3},?)+)/g, '$1<span class="wrap">$2</span>');
    $element.html(wrapped);
  });
});

.wrap {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">Item 7,000</div>
<div class="main">Item 960</div>
<div class="main">Item 7,000,000</div>

Answer 2

使用javascript正则表达式查找匹配的数字并替换为span

var regex =/\b(\d+)\b/g

＆＃13;

var regex =/\b(\d+)\b/g

var text = document.getElementById("main").innerHTML;
  
document.getElementById("main").innerHTML = text.replace(regex,'<span class="wrap">$1</span>')

＆＃13;

span.wrap{
 color:red;
}

＆＃13;

<p id="main">Item : 7000</p>

＆＃13;

Answer 3

如果使用node.textContent，则可以在div中获取字符串

string = document.querySelector('#main').textContent // --> "Item 7,000"

从这里你可以使用Array＃split来分隔每个单词：

array = string.split(' '); --> ['Item','7,000']

现在删除逗号并检查每个逗号isNaN，返回一个数组w：

newNode = array.map((e)=> isNaN(e.replace(/,/g,"")) ? e : {element:'span', content: e})

现在您可以使用['Item', { element: 'span', content: '7,000'}]生成示例中div元素的内容...

可能有更好的方法来做到这一点，我只是想帮助：）

检查字段是否包含数字，用容器和类包装数字？

3 个答案: