Question

我有这个简单的线条跨度。我只想加粗包含Running test:的行。 所有行

<span id="results" style="white-space: pre-line">Running test: test1
asasggsa
fasfs
afasaggas
</span>

知道怎么做？

应该是

 <span id="results" style="white-space: pre-line"><strong>Running test: test1</strong>
    asasggsa
    fasfs
    afasaggas
    </span>

Answer 1

使用split和join

<强>演示

var value = results.innerHTML; //since results is an id
var textToBold = value.split( "\n" )[0]; //get the first line
results.innerHTML = value.split( textToBold ).join( "<strong>" + textToBold + "</strong>" ); //split by the text to bold and then join with enclosing tags

<span id="results" style="white-space: pre-line">Running test: test1
asasggsa
fasfs
afasaggas
</span>

我只想加粗包含Running test的行：所有行

在这种情况下使用匹配

<强>演示

var value = results.innerHTML; //since results is an id
var text = "Running test";
var linesToBold = value.split( "\n" ).map( s => s.includes( text ) ?  "<strong>" + s + "</strong>" : s ).join( "\n" );
results.innerHTML = linesToBold

<span id="results" style="white-space: pre-line">Running test: test1
asasggsa
fasfs
afasaggas
</span>

Answer 2

您可以使用伪元素::first-line。但是您需要将span更改为p，因为它只能用于块级元素，如下所示：

#results::first-line{
  font-weight:bold;
}

<p id="results" style="white-space: pre-line">Running test: test1
asasggsa
fasfs
afasaggas
</p>

给字符串添加粗体

2 个答案: