highlight text in a div with blue color

Question

I using Angular2 and I have a div where I am displaying several lines of text. I have a button below the text. When I click on it, I want to have the whole text in div appear selected (like it happens when you manually select an area of text with blue background for text. Here is my div:

<div #ins class="xyz" innerHTML="{{ 'sometext' | translate }}"></div>

I can create a class with background-color of 'blue' and apply to the div when the button is clicked, but that makes the entire div blue. I want to show only the text part with background blue (just like it happens when you manually select the text) instead of the entire div. How can I achieve that?

in the inner html, are there any tags surrounding the text? so a header tag, paragraph tag, span tag, etc? — mast3rd3mon, Jan 02 '18 at 16:15
Yes I have tags for the styling and that's the reason I am using innerHTML — user1892775, Jan 02 '18 at 16:17
for example, if the innerHTML looks like `
Test Text
`, styling the background colour of the `
` tag should do what youre after — mast3rd3mon, Jan 02 '18 at 16:18
You can see an example of what @mast3rd3mon is talking about in [this answer](https://stackoverflow.com/a/14310180/1009922). — ConnorsFan, Jan 02 '18 at 16:22
I understood your point and tried placing the text string within a span that has background color. It looks lot better but some parts of the text between different lines are not colored - there is white space between lines. Is there any way to avoid those white spaces and have them colored too? — user1892775, Jan 02 '18 at 16:29
Are the lines between separate elements? Can you make a jsfiddle, codepen, plunker or a stackblitz of that case? It could include only the HTML and CSS. — ConnorsFan, Jan 02 '18 at 17:26
I still need to figure how to setup codepen etc, havnt done that before. Meanwhile, I can say that the lines are caused by
element. My html string has
for line breaks (that I need to give to separate lines) and I see whitespace between lines then — user1892775, Jan 02 '18 at 17:33

score 0 · Answer 1 · answered Jan 02 '18 at 16:18

0

.class {
    display:inline;
    background-color:green;
    color:#fff;
}

<div class="class">Trump<br>Trump</div>

answered Jan 02 '18 at 16:18

Scripy

143
13

Anamika Shrivastava · Answer 2 · 2018-01-10T05:34:04.017

0

Please get the code below. If you want to check the running example, go to plunker link.Demo

@Component({  
   selector: 'my-app',
   template: `
    <div [ngClass]="{'yellowclass':selectedtext== true}">
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
    </div>
    <div (click)="selectedText()"> Click here</div>   `, 
}) 

export class App {  
       name:string;  
       constructor() {
            this.name = `Angular! v${VERSION.full}`
      } 
      selectedtext:boolean =false;
      selectedText(){
            if(this.selectedtext==false){
               this.selectedtext= true;
            }else{
               this.selectedtext= false;
            }
       } 
}

edited Jan 10 '18 at 05:34

answered Jan 02 '18 at 17:48

Anamika Shrivastava

703
5
11

I cant access this plunker – user1892775 Jan 02 '18 at 17:51
1

@eugene.polschikov Please don't edit in code from third-party sites like Plunker into link-only answers unless the code is licensed with something compatible with CC-By-SA 3.0. [Even code with no available license is bad to copy over](https://meta.stackoverflow.com/q/348698). If the author does not add the code by themselves, just vote to delete. – Andrew Myers Jan 09 '18 at 17:19
@AndrewMyers , got it. Thanks for heads up! Will do next time – eugene.polschikov Jan 09 '18 at 17:23

Arnaf Aziz · Answer 3 · 2018-01-03T08:09:31.867

Try this in your html file

 <div #ins id="selectedTextId" class="xyz" innerHTML="{{ 'sometext lorem ipsum' }}"></div>
 <button (click)="selectText('selectedTextId')">select</button>

And add this method in your ts file

 private selectText(selectedElemntId):void {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(selectedElemntId));
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById(selectedElemntId));
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
        }
    }

This should work as it will select the specific text as you expected

score -1 · Answer 4 · answered Jan 02 '18 at 16:33

-1

Hi you can simply do this using javascript HTML DOM property.

function changeColor(){
 document.getElementById("paragraph").style.background = "blue";
}

<html>
<body>

<h1 id="paragraph">This is a Heading</h1>
<button onClick="changeColor()">ChangeColor</button>
</body>
</html>

Hope this will work for you. Happy coding :)

answered Jan 02 '18 at 16:33

Deepak Kumbhar

484
7
17

Is my answer was not helpful for you? @user1892775 – Deepak Kumbhar Jan 03 '18 at 09:52

highlight text in a div with blue color

4 Answers4