无法使用javascript替换特殊的字符组合

Question

I want to remove all ‍ which have character "ا" after from a paragraph. I use the following method but console says that this combination is not found. Please consider that this is Persian word and the character "ا" is instantly after ‍ as the characters are written Right to Left an the tail before character "ا" proves that they are connected together.

 $(document).ready(function(){ var htm=$("div").html(); var shouldRemove="‍ا"; if (htm.includes(shouldRemove)){ console.log('found'); } else{ console.log('not found'); } }) 

 body{font-size:26pt} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>&zwj;احترام</div> 

Answer 1

A way to do this would be to convert the ‍ا into text, using the method below, and getting the text of the div instead of its html, then comparing the two texts:

 $(document).ready(function(){ // get the text var div_txt = $("div").text(); var shouldRemove = "&zwj;ا"; // put it as html in a span, then get it as text var rem_txt = $("<span>").html(shouldRemove).text(); if (div_txt.includes(rem_txt)) { console.log('found'); } else { console.log('not found'); } }) 

 body { font-size:26pt } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>&zwj;احترام</div> 

Answer 2

The issue here is that when reading an HTML entity from the DOM, the entity gets parsed, so the character sequence ‍ turns into the single character ZERO WIDTH JOINER.

Your approach would work if you were to run JavaScript on the command line:

$ node
> s = '<div>&zwj;احترام</div>'
'<div>&zwj;احترام</div>'
> s.includes("&zwj;ا")
true

Even in a browser, if you use the JavaScript console directly, things work fine as you expected them to:

So what's different about reading from the DOM (in your case, with jQuery)? To see what is happening, let's check the actual characters within the string:

 $(document).ready(function(){ var htm=$("div").text(); console.log(Array.from(htm)); console.log(Array.from("‍ا")); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>&zwj;احترام</div> 

This gives:

Aha, so jQuery is parsing the HTML entity! Because of this, the text you want to search for should have the JavaScript zwj, not the HTML one. Specify it like this:

 $(document).ready(function(){ var htm=$("div").html(); var shouldRemove="\\u{200d}ا"; if (htm.includes(shouldRemove)){ console.log('found'); } else{ console.log('not found'); } }) 

 body{font-size:26pt} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>&zwj;احترام</div> 

Now it outputs true .

So all is well with RTL (text direction)! Turns out it's all just a matter of when HTML entities get parsed. :)

Answer 3

Instead of searching the entity ‍ inside the HTML, search the character itself ( code point +U200D ) in the text value of the div node (not its HTML):

 console.log("Found?", $("div").text().includes("\‍ا")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>&zwj;احترام</div> 

Answer 4

If you console log your htm variable it will o/p as: ‍احترام, so that's why when you try to search it with "‍ا", it outputs as 'not found'. Please try the below approach :

 $(document).ready(function(){ var htm=$("div").html(); var shouldRemove="ا"; if (htm.includes(shouldRemove)){ console.log('found'); } else{ console.log('not found'); } }) 

 body{font-size:26pt} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>&zwj;احترام</div>