Regex匹配行在html div中中断

I have a text structured like this:

我有这样一个文本结构:

1) CF582 Sortis (10): x 1 tabl.;
2) CF583 Sortis (20 mg): 2 x 1 tabl.;
3) CF734 Sortis (40 mg): 3 x 1 tabl.;

I need a regex that matches all digits at the beginning of each line (but not somewhere after the beginning as 10) on the first line) plus the closing bracket.

我需要一个regex，它匹配每一行开头的所有数字(但不是第一行开头后的某个数字)，加上结束括号。

Which is not a big deal for a plain text like this. The problem is that the text comes preformatted as the div innerHTML of the snippet I am attaching, and neither the ^, nor the \n characters match the new lines.

对于这样的纯文本来说，这并不是什么大问题。问题是来格式化文本的div innerHTML片段我附加,无论是^,还是\ n字符匹配的新行。

var myTherapyDiv = document.getElementById("mytherapy");

myTherapyDiv.innerHTML = myTherapyDiv.innerHTML.replace(/;(\s*\d*\))/g, ";<br>\n$1")

// therapy numbered list outline
myTherapyDiv.innerHTML = myTherapyDiv.innerHTML.replace(/(\b\d+\))/g, "<span style='color: red'>$1</span>");

<div class="inputcontents" id="mytherapy"> 1) CF582 Sortis (10): x 1 tabl.; 2) CF583 Sortis (20 mg): 2 x 1 tabl.; 3) CF734 Sortis (40 mg): 3 x 1 tabl.;</div>

1 个解决方案

#1

If you want to highlight the first numbers of each line then you can do it like this.

如果你想突出显示每行的第一个数字，你可以这样做。

Get the textContent of the desired element, split it at ; and process each line separately in a loop.

获取所需元素的textContent，并将其分割到;并在循环中分别处理每一行。

var myTherapyDiv = document.getElementById("mytherapy");
const lines = myTherapyDiv.textContent.split(';').filter(v => v !== '');
myTherapyDiv.innerHTML = '';

lines.forEach(line => {
  line = line.replace(/(\s*\d*\))/, "<span style='color: red'>$1</span>");
  myTherapyDiv.innerHTML += line + ";<br />";
});

<div class="inputcontents" id="mytherapy"> 1) CF582 Sortis (10): x 1 tabl.; 2) CF583 Sortis (20 mg): 2 x 1 tabl.; 3) CF734 Sortis (40 mg): 3 x 1 tabl.;</div>

If you want to solve it only by using regex then you can try this (although not very elegant).

如果您只想通过使用regex来解决它，那么您可以尝试这个(尽管不是很优雅)。

var myTherapyDiv = document.getElementById("mytherapy");

myTherapyDiv.innerHTML = myTherapyDiv.innerHTML.replace(/;(\s*\d*\))/g, ";<br>\n$1")
myTherapyDiv.innerHTML = myTherapyDiv.innerHTML.replace(/^\s*(\d+\))/, "<span style='color: red'>$1</span>");
myTherapyDiv.innerHTML = myTherapyDiv.innerHTML.replace(/<br>(\s*\d+\))/g, "<br><span style='color: red'>$1</span>");

<div class="inputcontents" id="mytherapy"> 1) CF582 Sortis (10): x 1 tabl.; 2) CF583 Sortis (20 mg): 2 x 1 tabl.; 3) CF734 Sortis (40 mg): 3 x 1 tabl.;</div>

Which can be simplified by merging the first replace with the third one like this.

可以通过将第一个替换与第三个替换合并来简化。

var myTherapyDiv = document.getElementById("mytherapy");

myTherapyDiv.innerHTML = myTherapyDiv.innerHTML.replace(/;(\s*\d*\))/g, ";<br><span style='color: red'>$1</span>");
myTherapyDiv.innerHTML = myTherapyDiv.innerHTML.replace(/^\s*(\d+\))/, "<span style='color: red'>$1</span>");

<div class="inputcontents" id="mytherapy"> 1) CF582 Sortis (10): x 1 tabl.; 2) CF583 Sortis (20 mg): 2 x 1 tabl.; 3) CF734 Sortis (40 mg): 3 x 1 tabl.;</div>

#1