Question

有一些内容

<p class="someclass">
    slerert укенукен werwert wert <br>
    1. вапр апоц вкен 8 ролгшщ 9 ар<br>
    3. ап 7 варер прпрпр<br>
    ...
</p>

是否可以更改<br>之后接下来的数字样式而不触及其他数字？我们可以选择像$(p.someclass br)这样的东西但是如何得到下面的数字（改变它的风格）？

Answer 1

好吧，你可以解析html然后替换你想要的东西......但它非常难看。

var text = $('.someclass').html();
text = text.replace(/^\s*(\d\.)/gm, '<b>$1</b>')

$('.someclass').html(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="someclass">
    slerert укенукен werwert wert <br>
    1. вапр апоц вкен 8 ролгшщ 9 ар<br>
    3. ап 7 варер прпрпр<br>
</p>

Answer 2

您可以使用简单的正则表达式。通过document.querySelector查询段落。

然后搜索匹配数字后跟一个点的所有实例。正则表达式为/\d+\./g。

\d表示0到9之间的数字
\+将匹配一个或多个数字
\.期间必须在正则表达式中进行转义

我们将简单地使用replace方法替换这些实例并将其包装在<b>标记中以使其变为粗体

var par = document.querySelector(".someclass");
var numbers = par.innerHTML.match(/\d+\./g); 
for (var i = 0; i < numbers.length; i++) {
    par.innerHTML = par.innerHTML.replace(numbers[i], "<b>" + numbers[i] + "</b>");
}

<p class="someclass">
    slerert укенукен werwert wert <br>
    1. вапр апоц вкен 8 ролгшщ 9 ар<br>
    3. ап 7 варер прпрпр<br>
    ...
</p>

Answer 3

这可能不是最好的方法。但它可能有所帮助：

var htmlSplits = $(".someclass").html().split("<br>");

var modifiedSplits = htmlSplits.map(function( split ){
  var str = split.replace(/\\n/g, "").trim();
  console.log( str );
  var regex = /^\d/;

  var matches = str.match(regex);
  if( matches )
    return str.replace( matches[0], "<b>"+matches[0]+"</b>");
  else
    return str;
});//forEach()

var updatedHTML = modifiedSplits.join("<br>");
$("#updated-text").html( updatedHTML );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<p class="someclass">
    slerert укенукен werwert wert <br>
    1. вапр апоц вкен 8 ролгшщ 9 ар<br>
    3. ап 7 варер прпрпр<br>
</p>

<p id="updated-text">
</p>

Answer 4

这是 Vanilla JS ，它使用Array.prototype.forEach循环并添加编号节点并替换编号文本 - 请参阅演示如下：

Array.prototype.forEach.call(document.querySelectorAll(".someclass br"), function(e, i) {

  // extract the numbering from the text
  var el = document.createElement('b');
  var text = (/^\s*\d./).exec(e.nextSibling.nodeValue);

  // remove the numbering from the next node
  e.nextSibling.nodeValue = e.nextSibling.nodeValue.replace(/^\s*\d./, '');

  // create the numbering element
  if (text) {
    el.appendChild(document.createTextNode(text[0].trim()));
    e.parentNode.insertBefore(el, e.nextSibling);
  }
});

<p class="someclass">
  slerert укенукен werwert wert
  <br>1. вапр апоц вкен 8 ролгшщ 9 ар
  <br>3. ап 7 варер прпрпр
  <br>
</p>

Answer 5

您需要做的就是获取前面带小数的数字并将其更改为<b>$1</b>：

var p = $('.someclass').html();

p = p.replace(/([0-9]\.)/g, "<b>$1</b>");                   

$('.someclass').html(p);

获取标签和标签后的内部数字

5 个答案: