JavaScriptで指定クラスを html() で挿入し、それ以外を text() で挿入する方法

前提・実現したいこと

.tag というクラスを持つHTMLタグだけを html() として .target に入れて、それ以外のHTMLタグは text() で入れたいです。

発生している問題・エラーメッセージ

全てHTMLになるか、すべてテキストになるか、にしかできません。

該当のソースコード

<html>
<head>
<style>
.tag{color:red;}
div{display:inline;}
</style>
<script>
var str = '私は<span class="tag">JavaScript</span>が<span>苦手</span>で、<span class="tag">CSS</span>は少しわかります';
</script>
</head>
<body>
  <div class="target"></div>
</body>
</html>

試したこと

まず知っているのが html() なので次のように試しました。

$('.target').html(str);

こちらですと下図になり、すべてがHTMLとして扱われてしまいます。

調べてみますと html() がいけないようで、text() という方法を見つけました。それが次です。

$('.target').text(str);

しかし下図になり、すべてがテキストとして扱われてしまいます。

やりたいのは.tagだけをHTMLとして扱い、下図の表示を目指しています。

補足情報（FW/ツールのバージョンなど）

jQueryのバージョンは3.4.1になります。
尚、var str = ''; の中はspanだけでなくあらゆるHTMLタグが想定されます。

m.ts10806

2021/01/24 07:26

その文字列はどこから来るのでしょう。

Woodwind

2021/01/24 07:44 編集

まず<textarea>に以下が入力されます。 --- 私はJavaScriptが苦手で、CSSは少しわかります --- これにJavaScriptが以下のように .tag を付けます。 --- 私はJavaScriptが苦手で、CSSは少しわかります --- この入力されたものをテキストとして扱い、自動で付けた.tagをHTMLとして扱いたいわけです。

行動規範の内容に同意します

回答2件

これにJavaScriptが以下のように .tag を付けます。

それを行う前にユーザー入力をエスケープする、が最適解かと思います。

投稿2021/01/24 07:45

maisumakun

総合スコア146018

Woodwind

2021/01/24 07:57

エスケープというのが何かわからず調べましたら、確かにそういった順序で解決できるかもしれません。ありがとうございます。もう少し勉強します。

行動規範の内容に同意します

ベストアンサー

ひとまず、そういう都合のいい機能は存在しないので、何かしらで置換かける必要があります。
雑に作ったサンプル

js
1var str = '私は<span class="tag">JavaScript</span>が<span>苦手</span>で、<span class="tag">CSS</span>は少しわかります';
2$('.target').html(str);
3
4$('.target span').not('.tag').each(function(idx,e){
5	str.replace('<span>'+$(e).html()+'</span>',$(e).text('<span>'+$(e).html()+'</span>'));
6});