How can we style a word in css with special character?

Question

I made an application in angular 2(5.0). The application is all about getting the trending tweets.

I faced one problem while styling. I am getting one paragraph though API

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

My need is, i want to give additional style to the words which having characters like # and @

Eg:

@_NAN_DINI
@InTheWordsOfK
@maidros78
#ereaad

So is it possible to add some basic style to these kind of word without heavy JavaScript ?? Can we solve it with CSS ? How ?

Note: I am using SCSS.

Script which can cause some performance bottle necks, example: We can do it using two for loops and identifying the words with @ or # and apply a style or style class. But it may create performance threat for application. — Aswin KV, Nov 21 '17 at 20:12
Not if it's all a single string. The styled element needs to be in an extra DOM element (usually a span). If it isn't yet you need Javascript to wrap the words you want to style. Then all you need is a CSS class. — Mörre, Nov 21 '17 at 20:51
Not possible with pure CSS. One solution would be to set an array of special characters, if a word contains a special character, wrap it in a `span` and then style the `span`. — APAD1, Nov 21 '17 at 21:02
You don't need two loops. You can do this with a regex. But yes, as others have mentioned, can't do it with just CSS. But the js would probably be a one liner, definitely not "heavy" — Matt Fletcher, Nov 21 '17 at 21:02

Intervalia · Accepted Answer · 2017-11-22T17:52:50.487

This is not something that can be done with only CSS. You will need JavaScript and the example below in raw JS without the need for any framework, but it can be use in any framework.

Try this:

<!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>

See: https://jsfiddle.net/intervalia/bu3rxq8q/

The function encodeStr contains two calls to replace. And those add either a <span class="class-at"> or a <span class="class-hash"> around the words you are looking for.

All that is needed

The function encodeStr is all the JS that is really needed to do the conversion. It is up to you to get the string into the function and use the result. You will also need the CSS that colors your fields the color you want. .class-at and .class-hash. Of course you can change those to whatever you want them to be called.

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

I don't understand your comment, my code is pure JS. No frameworks needed. — Intervalia, Nov 22 '17 at 17:39
Hey man, my question is about solution in angular 2 When i tried your solution in angular 2 its not working fine, — Aswin KV, Nov 22 '17 at 18:13
Can you post your code? The function I provide can be used in any framework. Your code just needs to get the string and pass it to my function and then take the result and use it however your framework needs to use it. But post your code and I should be able to show you how to use it. — Intervalia, Nov 22 '17 at 18:16
The function works man, but this ids cant fetch the data from angular components, its getting null. — Aswin KV, Nov 22 '17 at 18:23
Please post your code and show where it is failing, then I can help to resolve it. — Intervalia, Nov 22 '17 at 20:23
https://stackoverflow.com/questions/31548311/angular-html-binding adding your solution with above solution make me happy. — Aswin KV, Nov 23 '17 at 08:25

How can we style a word in css with special character?

1 Answers1

All that is needed