Question

我在角度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
#ereaad

那么可以在没有重 JavaScript的情况下为这些单词添加一些基本样式吗？我们可以用CSS解决它吗？怎么样？

注意：我使用的是SCSS。

Answer 1

这不是只能用CSS完成的事情。您将需要JavaScript和原始JS中的示例，而不需要任何框架，但它可以在任何框架中使用。

试试这个：

<!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-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 个答案:

只需