查找字符串的一部分并标记为粗体

Question

我有一个DIV容器，它正在填充来自db的自由文本。

我需要以粗体突出显示每一行的那一部分，其中我们有文本后跟冒号（:)。

<b>1. Line:</b> Lorem ipsum
<b>Another line:</b> dolor sit

我想我必须首先识别自由文本中的所有换行符（可能是＆lt; br＆gt;，\ n，\ r \ n，CRLF ....）然后进行某种替换？

任何想法如何解决这个问题？

我的示例以及它应该如何显示在这里 - ＆gt; https://jsfiddle.net/SchweizerSchoggi/oakmvx1o/4/

Answer 1

我建议有两个步骤的解决方案：

• 将字符串拆分为带有/<br\s*\/?>|[\r\n]+/正则表达式的行数组（各种<br>和换行符序列，删除空行）
• 将每一行的开头用:标记<b>封闭到第一个.replace(/^[^:]+:/, '<b>$&</b>')。

这是一个演示：

＆＃13;

＆＃13;

$("#container").html('1. Line: Lorem ipsum<br>Another line: dolor sit<br>Here is nothing to see<br><br>Last new line: amed');
var lines = $("#container").html().split(/<br\s*\/?>|[\r\n]+/).map(function(x) { return x.replace(/^[^:]+:/, '<b>$&</b>'); });
$("#container").html(lines.join("<br/>"));

＆＃13;

#container { margin-bottom: 30px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is how it looks now:<br/><hr/>
<div id="container2">
  1. Line: Lorem ipsum<br>Another line: dolor sit<br>Here is nothing to see<br><br>Last new line: amed
</div>
<hr/>
This is a new string:<br/><hr/>
<div id="container">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Bellow不是一个正则表达式解决方案，而是一个css。

改变你的小提琴，看一看。刚刚在评论中遵循了上面提到的css规则方法。

https://jsfiddle.net/oakmvx1o/5/

我添加的css规则：#container2 b { background-color: yellow; }