Question

我有一些带数字的div，还有一些有数字和文字的div。如果div有数字和文本，我想将文本包装在一个span中，这样我就可以改变它的字体大小。

看起来像这样：

<div>Word 500</div>
<div>350</div>

我想使用JS来实现这样：

<div><span>Word</span> 500</div>
<div>350</div>

我已经尝试循环遍历字符串并检查字母/数字以及拼接在单词周围。但我还没有找到一个好的解决方案。有什么想法吗？

Answer 1

您可以使用replaceWith() jq方法：

$('div').contents().replaceWith(function() {
  return this.nodeType === 3 && this.nodeValue.replace(/([a-zA-ZÀ-ú]+)/, '<span>$1</span>');
});

div span {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Word 500</div>
<div>350</div>
<div>wWÅÄÖåäö 600</div>
<div>50</div>

Answer 2

请看下面的代码。

它使用.split()函数将整个文本分解为字符串数组，并检查每个单词的数字。

＆＃13;

$(document).ready(function(){
  $("div").each(function(){
    var entireText = $(this).text();
    var allWords = entireText.split(" ");
    var updatedText = "";
    $(this).empty();
    $.each(allWords, function(i,value){
      if(isNaN(value))
        {
          updatedText+= "<span>"+value+"</span>&nbsp";
        }
      else
        {
          updatedText+= value;
        }
    });
    
    $(this).html(updatedText);
  });  
});

＆＃13;

span{
  color: blue;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>Word 500</div>
<div>350</div>

＆＃13;

Answer 3

$('div').each(function() {
        $(this).html($(this).html().replace(/\b[A-Za-z]+\b/g, 
            function(x) {return '<span class="textClass">' + x + '</span>';
        }));
    }
);

https://jsfiddle.net/b7q7zyu8/

Answer 4

var word = '<div>Word 500</div>'.split('500');
var number = '<div>Word 500</div>'.split('500');

var name = split[0];

现在您已经解析了字符串，您可以使用它们，无论您想要什么样的方式。

仅包含带有文本和数字的div中的文本

4 个答案: