CODEWITHSUNDEEP
javascriptjquery
user9478626
user9478626

Reputation:

Give bold to string

I have this simple span with lines. I just want to bold the line that contains Running test:. All line 

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

Any idea how do to it?

It should be something like

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

Upvotes: 0

Views: 43

Answers (2)

aMJay
aMJay

Reputation: 2243

You can use pseudo element ::first-line. But you need to change span to p as it can be used only with block level elements like so:

#results::first-line{
  font-weight:bold;
}
<p id="results" style="white-space: pre-line">Running test: test1
asasggsa
fasfs
afasaggas
</p>

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68443

Use split and join

Demo

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>

I just want to bold the line that contains Running test:. All line

In that case use match

Demo

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>

Upvotes: 1

Related Questions