How to highlight specific words in a given text-CodePudding

I built a keyword extraction project and i have managed to extract important keyword from the user entered text, but I want to know if there is a way to highlight that extracted words and return them back to html page from flask app for the user to see the important keywords.

Code block

@app.route('/predict', methods=['POST'])
def predict():

    if request.method == 'POST':
        sentence = request.form['message']

    text = sentence.lower()

    # remove tags
    text1 = re.sub("&lt;/?.*?&gt;", " &lt;&gt; ", text)

    # remove special characters and digits
    text2 = re.sub("(\\d|\\W) ", " ", text1)

    # initialising rake
    r = Rake()

    # Keyword Extraction
    r.extract_keywords_from_text(sentence)

    # getting keyword phrases ranked highest to lowest with scores
    out = r.get_ranked_phrases_with_scores()

    # creating lists for dataframe
    freq = []
    word = []
    for i in range(0, len(out)):
        freq.append(out[i][0])
        word.append(out[i][1])

    # removing repetated word for highlighting
    new_word = []

    for i in range(0, len(word)):
        indi = word[i].split()
        for i in indi:
            if i not in new_word:
                new_word.append(i)
            else:
                continue

    df = pd.DataFrame(list(zip(freq, word)), columns=['FREQ', 'WORD'])

    # Barplot
    fig = px.bar(df, x="WORD", y="FREQ")
    fig.update_layout({
        'paper_bgcolor': 'rgb(210, 231, 255)'
    })

    # Create graphJSON for HTML file
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)

    highlighted = " ".join(colored(t, 'white', 'on_yellow') if t in new_word else t for t in text2.split())
    # highlighted = " ".join(('\033[43;37m{}\033[m'.format(t)) if t in new_word else t for t in text2.split())

    print(highlighted)

    return render_template('result.html', graphJSON=graphJSON, highlighted=highlighted, scroll='text')

I tried to highlight the word by using a loop and termcolor library and its working in python terminal but as soon as i return that to html page the color is converted to ANSI escape sequence.

Html page code

    <!-- Result -->
    <div id='text' style="background-color: rgb(210, 231, 255); padding: 2%;">
        <h2>The Keywords are highlighted below: </h2>
        <p>{{ highlighted }}</p>
    </div>

Python terminal output

Html page output

I want the output something like this in html page: Required output in html

CodePudding user response：

For changing colors in HTML, if you're using HTML5, you can use <mark> tag for highlighting words. Otherwise, you'll need to use CSS.

In your code, it could be something like this:

highlighted = " ".join(f"<mark>{t}</mark>" if t in new_word else t for t in text2.split())

or like this:

highlighted = " ".join(f'<span style="background-color: #FFFF00">{t}</span>' if t in new_word else t for t in text2.split())

or you could define a CSS class .highlighted and add that instead:

highlighted = " ".join(f'<span >{t}</span>' if t in new_word else t for t in text2.split())

with style defined elsewhere on the page as:

.highlighted {
  background-color: #FFFF00;
}