Question

我想知道是否有可能只在HTML / CSS中加粗数字？是否可以使用正则表达式？我正在寻找内联解决方案。我在HTML文档中列出了很长的RGB颜色列表，并且只想在该列表中使用粗体数字（因此它们更好地可见）。我正在寻找更简化的解决方案，而不是手动添加标记<strong>或<b>。在正则表达式中我知道我可以使用运算符\d ...

我想：

r6/g131/b187 r1/g90/b20 r0/g255/b71

成为：r 6 / g 131 / b 187 r 1 / g 90 / b 20 r 0 / g 255 / b 71

到目前为止，丑陋而混乱的代码：

r<b>6</b>/g<b>131</b>/b<b>187</b>
r<b>1</b>/g<b>90</b>/b<b>20</b>
r<b>0</b>/g<b>255</b>/b<b>71</b>

Answer 1

＆＃13;

let str = 'r6/g131/b187 r1/g90/b20 r0/g255/b71';

document.getElementById('output').innerHTML = str.replace(/\d+/g, function(match) {
	return '<b>' + match + '</b>';
});

＆＃13;

<div id="output"></div>

＆＃13;

Answer 2

一种简单的方法是使用replace来包装<strong>标记中的数字组。

＆＃13;

var content = document.querySelectorAll('td');
content.forEach(function(cell) {
  cell.innerHTML = cell.innerText.replace(/(\d+)/g, '<strong>$1</strong>');
});

＆＃13;

<table border="1">
  <tbody>
    <tr>
      <td>r6/g131/b187 r1/g90/b20 r0/g255/b71</td>
      <td>r6/g131/b187 r1/g90/b20 r0/g255/b71</td>
    </tr>
    <tr>
      <td>r6/g131/b187 r1/g90/b20 r0/g255/b71</td>
      <td>r6/g131/b187 r1/g90/b20 r0/g255/b71</td>
    </tr>
    <tr>
      <td>r6/g131/b187 r1/g90/b20 r0/g255/b71</td>
      <td>r6/g131/b187 r1/g90/b20 r0/g255/b71</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 3

你可以使用jQuery和每个函数。只需使用相同的选择器，当您将多次使用时，这将适用于您的所有HTML文档：

＆＃13;

$('span.color').each(function() {
  $(this).html($(this).html().replace(/(\d+)/g, '<strong>$1</strong>'));
});

＆＃13;

span.color {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="color">r6/g131/b187 </span>
<span class="color">r1/g90/b20 </span>
<span class="color">r0/g255/b71</span>

＆＃13;

Answer 4

如果HTML文档中列出的RGB颜色列表，您可以执行的操作是查找模式并捕获组并使用<b>标记将其包围。

＆＃13;

document.body.innerHTML = document.body.innerHTML.replace(/r(\d+)\/g(\d+)\/b(\d+)/g, "r<b>$1</b>/g<b>$2</b>/b<b>$3</b>")

＆＃13;

<html>
<head>
</head>
<body>
<div>
    <span>r6/g131/b187</span>
    r1/g90/b20
</div>
<p>r0/g255/b71</p>
<span>test = 1</span>
</body>
</html>

＆＃13;

Answer 5

使用此

function updateHaystack（input，needle）{return input.replace（new RegExp（'（^ | \ s）（'+ needle +'）（\ s | $）'，'ig'），'$ 1 $ 2 $ 3' ）; } var markup = document.getElementById（'somediv'）。innerHTML; var output = updateHaystack（markup，'cows'）; document.getElementById（'somediv'）。innerHTML = output

Answer 6

HTML和CSS无法实现。你必须使用Javascript，就像这样。

添加任何所需样式的简单方法。

@Table(name = "table_doc")
@SuppressWarnings("serial")
@Entity
@Document(indexName = "tabledoc", type = "tabledoc")
public class FileUpload implements Serializable {

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Long id;
private String filename;

@Lob
private byte[] file;

private String mimeType;

private Long size;

public FileUpload(String filename, byte[] file, String mimeType, Long size) {
    super();
    this.filename = filename;
    this.file = file;
    this.mimeType = mimeType;
    this.size = size;
}
public FileUpload() {
    super();
}
public Long getId() {
    return id;
}
public void setId(Long id) {
    this.id = id;
}
public String getFilename() {
    return filename;
}
public void setFilename(String filename) {
    this.filename = filename;
}
public byte[] getFile() {
    return file;
}
public void setFile(byte[] file) {
    this.file = file;
}
public String getMimeType() {
    return mimeType;
}
public void setMimeType(String mimeType) {
    this.mimeType = mimeType;
}
public Long getSize() {
    return size;
}
public void setSize(Long size) {
    this.size = size;
}
}

jsfiddle

HTML / CSS内联中的粗体数字

6 个答案: