用蓝色突出显示 div 中的文本答案

【问题标题】：highlight text in a div with blue color用蓝色突出显示 div 中的文本
【发布时间】：2018-06-12 08:29:14
【问题描述】：

我使用 Angular2，我有一个 div，我在其中显示多行文本。我在文本下方有一个按钮。当我点击它时，我希望 div 中的整个文本都被选中（就像你手动选择一个带有蓝色背景的文本区域作为文本一样。这是我的 div：

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

我可以创建一个背景颜色为“蓝色”的类，并在单击按钮时应用到 div，但这会使整个 div 变为蓝色。我只想显示背景为蓝色的文本部分（就像手动选择文本时发生的那样）而不是整个 div。我怎样才能做到这一点？

【问题讨论】：

在内部html中，文本周围是否有任何标签？所以是标题标签、段落标签、跨度标签等？
是的，我有样式标签，这就是我使用innerHTML的原因
例如，如果 innerHTML 看起来像 <p>Test Text</p>，则设置 <p></p> 标签的背景颜色应该符合您的要求
您可以在this answer 中看到@mast3rd3mon 所谈论内容的示例。
我理解您的意思，并尝试将文本字符串放在具有背景颜色的范围内。它看起来好多了，但不同行之间的某些文本部分没有着色 - 行之间有空白。有什么办法可以避免这些空白并让它们着色？

标签： html css angular typescript angular2-template

【解决方案1】：

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

&lt;div class="class"&gt;Trump&lt;br&gt;Trump&lt;/div&gt;

【讨论】：

【解决方案2】：

您好，您可以使用 javascript HTML DOM 属性简单地执行此操作。

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>

希望这对你有用。快乐编码:)

【讨论】：

我的回答对您没有帮助吗？ @user1892775

【解决方案3】：

请获取以下代码。如果要查看运行示例，请转到 plunker 链接。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;
            }
       } 
}

【讨论】：

我无法访问这个插件
@eugene.polschikov 请不要将来自第三方网站（如 Plunker）的代码编辑为仅链接的答案，除非该代码已获得与 CC-By-SA 3.0 兼容的许可。 Even code with no available license is bad to copy over。如果作者不自己添加代码，就投票删除吧。
@AndrewMyers ，明白了。感谢您的提醒！下次会做

【解决方案4】：

在你的 html 文件中试试这个

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

并将此方法添加到您的 ts 文件中

 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);
        }
    }

这应该可以工作，因为它会按照您的预期选择特定的文本

【讨论】：