Remove ­ (soft hyphen) entity from element

Question

I'm trying to remove all ­ entities (soft hyphens) from my element,

I've been trying to do this using jquery. When I fetch the text from the html element containing the entity I seem to get a string where the entity is "hidden" or can't be edited.

Do you have to do something in particular to actually get a string including the entities?

$( document ).ready(function(){
  $("button").on("click", function(){
    var html = $("div > span").html();
    var newHtml = html.replace("­", "");
    
    $("div > span").html(newHtml);
  });
});

div{
  max-width: 50px;
  padding: 10px;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>My text will be hyphe&shy;ned</span>
</div>
<button>
  Remove Hyphens
</button>

Answer 1

Use regex:

var newHtml = html.replace(/\­/gi, "");

Note: You may also need to check for ­, because browser treats it in numbers and not in human friendly chars too.

Explanation:

/(\­)/gi
  1st Capturing group (\­)
    \& matches the character & literally
    shy; matches the characters shy; literally (case insensitive)
    g modifier: global. All matches (don't return on first match)
    i modifier: insensitive. Case insensitive match (ignores case of [a-zA-Z])

Snippet

$( document ).ready(function(){
  $("button").on("click", function(){
    var html = $("div > span").html();
    var newHtml = html.replace(/(\­|­|­)/gi, "");
    
    $("div > span").html(newHtml);
  });
});

div{
  max-width: 50px;
  padding: 10px;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>My text will be hyphe&shy;ned</span>
</div>
<button>
  Remove Hyphens
</button>

Regex101: https://regex101.com/r/wD3oX7/1