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 = {
        "الخليج العربي": true,
            "الاتفاق النووي": true,
            "الخليج العربي": true,
            "وإيران": true,
            "والتفاوض": true,
            "وأمريكا": true,
            "اوباما": true,
            "الولايات المتحدة": true,
            "الولايات المتحدة الأمريكية": true
    };

    // 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(
            /([\u0600-\u06ff]+)([^\u0600-\u06ff]+)?/g,
        replacer);

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

    // Our replacer. We define it separately rather than
    // inline because we use it more than once      
    function replacer(m, c0, c1) {
        // Is the word in our keywords map?
        if (keywords[c0]) {
            // Yes, wrap it
            c0 = '<a class="red" href="#">' + c0 + '</a>';
        }
        return c0 + c1;
    }
})();