如何在CSS中用特殊字符设置单词样式？

Question

我在angular 2（5.0）中进行了申请。 该应用程序是关于获取流行趋势的。

造型时我遇到一个问题。 我通过API得到了一段

例如： @_NAN_DINI @InTheWordsOfK @maidros78 Self immolation is still a form of social protest in India. Remember the guy w… @_NAN_DINI @InTheWordsOfK @maidros78 Self immolation is still a form of social protest in India. Remember the guy w…

我的需要是，我想给具有#和@等字符的单词赋予其他样式

例如：

@_NAN_DINI
@InTheWordsOfK
@maidros78
#ereaad

因此可以在不使用大量 JavaScript的情况下为此类单词添加一些基本样式吗？ 我们可以用CSS解决吗？ 怎么样？

注意：我正在使用SCSS。

Answer 1

仅CSS不能做到这一点。 您将不需要原始JS就需要JavaScript和下面的示例，而无需任何框架，但是它可以在任何框架中使用。

尝试这个：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Twitter CSS 1</title>
    <style>
     #input {
       font: 14px/1.2em Tahoma;
       height: 12em;
       width: 500px;
     }

     .class-at {
       color: blue;
     }

     .class-hash {
       color: green;
     }
    </style>
  </head>
  <body>
    <h3>Enter Text Here</h3>
    <textarea id="input">@_NAN_DINI @InTheWordsOfK @maidros78 Self immolation is still a form of social protest in India. Remember the guy w…</textarea>
    <hr/>
    <div id="output"></div>
    <script>
    var inEl = document.getElementById('input');
    var outEl = document.getElementById('output');

    function encodeStr(str) {
      return str.replace(/(\@\S+)/g, (key) => `<span class="class-at">${key}</span>`).replace(/(\#\S+)/g, (key) => `<span class="class-hash">${key}</span>`);
    }

    function inputHandler() {
      outEl.innerHTML = encodeStr(inEl.value);
    }

    inEl.addEventListener('input', inputHandler);
    inputHandler();
    </script>
  </body>
</html>

参见： https : //jsfiddle.net/intervalia/bu3rxq8q/

函数encodeStr包含两个replace调用。 并<span class="class-at">要查找的单词周围添加<span class="class-at">或<span class="class-hash"> 。

所有需要的

函数encodeStr是完成转换所需的所有JS。 将字符串输入函数并使用结果由您决定。 您还将需要使用CSS为您的字段着色所需的颜色。 .class-at和.class-hash 。 当然，您可以将它们更改为您希望它们被调用的任何东西。

function encodeStr(str) {
  return str.replace(/(\@\S+)/g, (key) => `<span class="class-at">${key}</span>`).replace(/(\#\S+)/g, (key) => `<span class="class-hash">${key}</span>`);
}

如何在CSS中用特殊字符设置单词样式？

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-11-21 21:12:24

所有需要的

如何在CSS中用特殊字符设置单词样式？

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-11-21 21:12:24

所有需要的

解决方案1
3 已采纳 2017-11-21 21:12:24