Can not remove again the character I added using JS

Question

For some reasons I add zero-width joiner to a keyword. I want to exclude adding it when the keyword is in start of new line but I can not remove it again.

I guess two reasons for this problem but I have no idea how to solve the problem in both cases:

1- wrong usage of \n and \r to detect start of line?

2- When I inspect the generated html after adding joiner, I see that the added ‍ is wrapped by double quotation like "‍". Do I need to consider these quotations when trying to remove them?

var tail="\u200D";
var keyword="است";

var htm=$("#test").html();

//Adding joiner to keywords
htm=htm.split(keyword).join(tail+'<span class="red">'+tail+keyword+tail+'</span>'+tail);

//Removing all possible combination of joiner with new lines
htm=htm.split('\r\n'+tail).join('\r\n');
htm=htm.split('\n'+tail).join('\n');
htm=htm.split('\r'+tail).join('\r');
htm=htm.split('\r\n'+'<span class="red">'+tail).join('\r\n'+'<span class="red">');
htm=htm.split('\n'+'<span class="red">'+tail).join('\n'+'<span class="red">');
htm=htm.split('\r'+'<span class="red">'+tail).join('\r'+'<span class="red">');

 $("#test").html(htm);

div{font-size:36pt;}
.red{color:red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">استکان</div>

Answer 1

use .text() instead of .html() for searching:

if($("#test").text().startsWith(tail)) 
    $("#test").html($("#test").html().replace(tail, ''));