CODEWITHSUNDEEP
javascriptp5.jsword-list
Johan
Johan

Reputation: 1

How to highlight words from a wordlist directly in the text?

I have a typing field that's linked to the afinn word list. This is the project i am using: https://github.com/CodingTrain/website/tree/master/CodingChallenges/CC_044_afinn111SentimentAnalysis/P5

The detected words from the list are written below, telling the score of the word.

I want the detected words to be highlighted directly in the typing field. (shades of red for negativ words with a score from -5 to -1 and shades of green for positive words with a score from +1 to +5)

I was not able to create an example that runs in stackoverflow, but here's an example from github how it works right now: https://darenr.github.io/afinn/

The piece of code will be used on a website. The code is using the p5.js library and the afinn wordlist (json file): https://github.com/CodingTrain/website/blob/master/CodingChallenges/CC_044_afinn111SentimentAnalysis/P5/afinn111.json I normally do design, so i'm really not good in coding. I hope you understand the question.

javascript:

// Daniel Shiffman
// http://codingtra.in
// http://patreon.com/codingtrain
// Code for: https://youtu.be/VV1JmMYceJw


var afinn;

function preload() {
  afinn = loadJSON('afinn111.json');
}


function setup() {
  noCanvas();
  console.log(afinn);

  var txt = select('#txt');
  txt.input(typing);

  function typing() {
    var textinput = txt.value();
    var words = textinput.split(/\W/);
    console.log(words);
    var scoredwords = [];
    var totalScore = 0;
    for (var i = 0; i < words.length; i++) {
      var word = words[i].toLowerCase();
      if (afinn.hasOwnProperty(word)) {
        var score = afinn[word];
        console.log(word, score);
        totalScore += Number(score);
        scoredwords.push(word + ': ' + score + ' ');
      }
    }
    var scorePar = select('#scoreP');
    scorePar.html('score: ' + totalScore);
    var comp = select('#comparativeP');
    comp.html('comparative: ' + totalScore / words.length);
    var wordlist = select('#wordlistP');
    wordlist.html(scoredwords);

    //console.log(txt.value());
  }
}





function draw() {

}

html:

<html>
<head>
  <meta charset="UTF-8">
  <title>AFINN-111 demo</title>
  <script language="javascript" type="text/javascript"             src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
  <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js">    </script>
</head>
<body>
  <h1>AFINN Sentiment Demo</h1>

  <p>
    Type here:<br />
    <textarea id="txt" cols=50 rows=10></textarea>
  </p>

  <p id="scoreP"></p>
  <p id="comparativeP"></p>
  <p id="wordlistP"></p>

</body>
</html>

Problem: I need the scored words from the afinn list to be highlighted directly in the typing field. In shades of red (negative words, from -5 to -1) and shades of green (positve words, from +1 to +5)

I hope anyone can help! It would be so much appreciated!

Upvotes: 0

Views: 101

Answers (0)

Related Questions