0

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>

Improve this question
2
  • it should be dynamic ofc.. like find the line that contains "Running test:" in results and bold that line Commented Mar 12, 2018 at 13:59
  • You're giving very little context. When do you want it to be bold? Do you want this happening on an onclick? Have you tried writing it yourself? Do you want the text to be displayed before running the test? Commented Mar 12, 2018 at 14:02

2 Answers 2

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

not this. I dont know that is is test1 or whatever. I only know it contains Running test:
@user9478626 You mean only bold the first line? check the updates.
Then just input text that you know it contains inside the textToBold variable
there can be more Running tests. not only on the first
@user9478626 Check again.
|
0

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>

Improve this answer

Comments