escape-символы не работают с innerHTML

Question

У меня есть строка, содержащая escape-символы HTML (для < и >), которые я пытаюсь сделать внутри div с использованием innerHTML. экранированные символы не должны отображаться как обычный html, а скорее как текст. Тем не менее, они все еще делают, так есть ли работа для этого?

Примечание: цель состоит в том, чтобы отобразить несколько (то есть не все) теги как обычный текст.

Вот пример реализации:

var string = "<div>yolo</div>"; 

string = string.replace(/</g, '&lt;'); //replaces all '<' with its escape character 
string = string.replace(/>/g, '&gt;'); //replaces all '>' with its escape character 

string = string.replace(/(=|%|\/|\*|-|,|;|\+|<|>)/g, "<span class=\"sc\">$1</span>"); 

//the last line adds special formatting 
//to certain characters using CSS (not shown) 
//and a span tag with class, "sc". 
//this is the reason that I cannot just simply 
//use innertext instead of innerhtml 

document.body.innerHTML = string; 

P.S., пожалуйста, дайте ответ в чистом JavaScript. Мне все равно, если вы добавите решение jQuery, мне просто нужен чистый javascript.

Answer 1

Это не работает должным образом, потому что вы заменяете ; с помощью <spans>. Попробуйте заменить весь <первым, чтобы предотвратить разрывание объектов.

например.

var string = "<div>yolo</div>"; 
 

 
string = string.replace(/</g, '&lt;'); //replaces all '<' with its escape character 
 
string = string.replace(/>/g, '&gt;'); //replaces all '>' with its escape character 
 

 
string = string.replace(/(&lt;|&gt;|=|%|\/|\*|-|,|;|\+|<|>)/g, "<span class=\"sc\">$1</span>"); 
 

 
//the last line adds special formatting 
 
//to certain characters using CSS (not shown) 
 
//and a span tag with class, "sc". 
 
//this is the reason that I cannot just simply 
 
//use innertext instead of innerhtml 
 

 
document.body.innerHTML = string;

.sc { 
 
    color: red; 
 
    font-weight: bold; 
 
}

Answer 2

Если вы используете jQuery, вы можете иметь дело с text() вместо innerHTML().