如何將阿拉伯語與字母分開？

Question

如果您嘗試此鏈接https://jsfiddle.net/u4bxz74c/10/。後來的結果會是這樣

PART 1 
<p id="posttextareadisplay"> 
    <p class="ENGLISH">This is a samplasde textssss</p> 
    <p class="ENGLISH"><b>فَإِذَا جَلَسْتَ فِي وَسَطِ الصلَاةِ فَاطْمَئِن، وَافْتَرِشْ فَخِذَكَ الْيُسْرَى ثُم تَشَهدْ</b></p> 
</p> 

PART 2 
<p id="posttextareadisplay"> 
    <p class="ENGLISH">This is a samplasde textssss <b>فَإِذَا جَلَسْتَ فِي وَسَطِ الصلَاةِ فَاطْمَئِن، وَافْتَرِشْ فَخِذَكَ الْيُسْرَى ثُم تَشَهدْ</b></p> 
</p> 

問題PART 1：如果你看到下面的代碼，所有paragraphs或<p>是class="ENGLISH"。

如何使之成爲一個paragraph或<p>class="ENGLISH"是class="ARAB"，如果段落中的文字是阿拉伯語？但是，如果寫的不是阿拉伯語，所以class="ENGLISH"

PART 1 
<p id="posttextareadisplay"> 
    <p class="ENGLISH">This is a samplasde textssss</p> 
    <p class="ENGLISH"><b>فَإِذَا جَلَسْتَ فِي وَسَطِ الصلَاةِ فَاطْمَئِن، وَافْتَرِشْ فَخِذَكَ الْيُسْرَى ثُم تَشَهدْ</b></p> 
</p> 

*****  I WANT TO BE LIKE THIS  ******* 
<p id="posttextareadisplay"> 
    <p class="ENGLISH">This is a samplasde textssss</p> 
    <p class="ARAB"><b>فَإِذَا جَلَسْتَ فِي وَسَطِ الصلَاةِ فَاطْمَئِن، وَافْتَرِشْ فَخِذَكَ الْيُسْرَى ثُم تَشَهدْ</b></p> 
</p> 

問題PART 2的段落：但如果用阿拉伯語書寫平原或普通字體的加入。因此，段落或<p>保持class="ENGLISH"

像這樣

<p class="ENGLISH"> This is a sa <b> لْيُسْرَى ثُم تَشَهدْ</b></p> 
<p class="ENGLISH"><b> لْيُسْرَى ثُم تَشَهدْ</b> This is a sa</p> 
<p class="ENGLISH"> This is a sa <b> ا لْيُسْرَى ثُم تَشَهدْ</b> This is a sa</p> 
<p class="ENGLISH"><b> لْيُسْرَى ثُم تَشَهدْ</b> This is a sa <b> لْيُسْرَى ثُم تَشَهدْ</b></p> 

---

注：我試過這個代碼，但現在看來，這個代碼封裝textarea的全部內容

if (pattern.test(newText)) { 
    str = newText.replace($format_search[i], $arab_format_replace[i]); 
} else { 
    str = newText.replace($format_search[i], $format_replace[i]); 
} 

Answer 1

您可以從字符串"abcdefghijklmnopqrstuvwxyz "與創建一個RegExp模式帶有不區分大小寫標誌的構造函數i;使用循環迭代元素;如果元素的.textContent用繩子鑄的人物之一開始RegExp或元素.textContent的每個字符內RegExp人物，設定元素.className到"ENGLISH"，否則設置元素.className到"ARAB"之一。

請注意document中元素的id應該是唯一的。另外，<p>不是<p>元素的有效子元素。

替代class="posttextareadisplay"對於id="posttextareadisplay"在父母<p>元件和<span>對於孩子<p>元件。

const en = "abcdefghijklmnopqrstuvwxyz "; 
 

 
for (let el of document.querySelectorAll(".ENGLISH")) { 
 
    if (new RegExp(`^[${en.slice(0, en.length -1)}]`, "i").test(el.textContent) 
 
    || [...el.textContent].every(char => 
 
      new RegExp(`${char}`, "i").test(en))) { 
 
    el.className = "ENGLISH" 
 
    } else { 
 
    el.className = "ARAB" 
 
    } 
 
}

PART 1 
 
<p class="posttextareadisplay"> 
 
    <span class="ENGLISH">This is a samplasde textssss</span> 
 
    <span class="ENGLISH"><b>فَإِذَا جَلَسْتَ فِي وَسَطِ الصلَاةِ فَاطْمَئِن، وَافْتَرِشْ فَخِذَكَ الْيُسْرَى ثُم تَشَهدْ</b></span> 
 
</p> 
 

 
PART 2 
 
<p class="posttextareadisplay"> 
 
    <span class="ENGLISH">This is a samplasde textssss <b>فَإِذَا جَلَسْتَ فِي وَسَطِ الصلَاةِ فَاطْمَئِن، وَافْتَرِشْ فَخِذَكَ الْيُسْرَى ثُم تَشَهدْ</b></span> 
 
</p>