JSFiddle - React, Tailwind, and code Playground

HTML

<div id="article">

    <p>keywords</p>
    <p>الولايات المتحدة الأمريكية, الولايات المتحدة, اوباما, وأمريكا, والتفاوض, وإيران, الاتفاق النووي, الخليج العربي, الخليج الفارسي</p>
</div>

CSS

.red {
    color:red!important;
    font-size:18px
}
p {
    margin:10px;
    font-size:18px
}
#article {
    direction:rtl;
}

JavaScript

(function () {
    // Our keywords. There are lots of ways you can produce
    // this map, here I've just done it literally
    //الولايات المتحدة الأمريكية, الولايات المتحدة, اوباما, وأمريكا, والتفاوض, وإيران, الاتفاق النووي, الخليج العربي, الخليج الفارسي

    var keywords = [ "الخليج العربي","الاتفاق النووي","الخليج العربي",
            "وإيران","والتفاوض","وأمريكا","اوباما",
            "الولايات المتحدة الأمريكية","الولايات المتحدة"
    ];
    
    var keywordRegexp = new RegExp(keywords.join("|"), 'g');

    // Loop through all our paragraphs (okay, so we only have two)
    $("p").each(function () {
        var $this, text;

        // We'll use jQuery on `this` more than once,
        // so grab the wrapper
        $this = $(this);

        // Get the text of the paragraph
        // Note that this strips off HTML tags, a
        // real-world solution might need to loop
        // through the text nodes rather than act
        // on the full text all at once
        text = $this.text();

        // Do the replacements
        // These character classes just use the primary
        // Arabic range of U+0600 to U+06FF, you may
        // need to add others.
        //text = text.replace(keywordRegexp, replacer);
        text = text.replace(keywordRegexp, '<a class="red" href="#">$&</a>');

        // Update the paragraph
        $this.html(text);
    });

    // Our replacer. We define it separately rather than
    // inline because we use it more than once      
    function replacer(g0) {
        return '<a class="red" href="#">' + g0 + '</a>';
    }
})();