[解決済み] JavaScriptでHTMLエンティティをエンコードする
質問
私は、ユーザーがコンテンツを入力できるCMSに携わっています。問題は、ユーザーがシンボル
®
ブラウザによっては、うまく表示されないことがあります。記号を検索し、対応するhtmlエンティティに変換する必要があるリストを設定したいと思います。例えば
® =>
®
& =>
&
© =>
©
™ =>
™
変換後、それをラップする必要があります。
<sup>
タグを使用すると、このようになります。
®
=>
<sup>®</sup>
特定のフォントサイズとパディングスタイルが必要なため。
sup { font-size: 0.6em; padding-top: 0.2em; }
JavaScriptはこのような感じでしょうか?
var regs = document.querySelectorAll('®');
for ( var i = 0, l = imgs.length; i < l; ++i ) {
var [?] = regs[i];
var [?] = document.createElement('sup');
img.parentNode.insertBefore([?]);
div.appendChild([?]);
}
ここで、"[?]"は、よくわからないことがある、という意味です。
その他の詳細
- 私はこれを純粋なJavaScriptで行いたいと考えています。 jQueryのようなライブラリが必要です、ありがとうございます。
- バックエンドはRuby
- Ruby on Railsで構築されたRefineryCMSを使用。
解決するには?
正規表現を使うと、指定されたユニコード範囲内の任意の文字を、そのhtmlエンティティに相当する文字に置き換えることができます。コードは次のようなものになります。
var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/g, function(i) {
return '&#'+i.charCodeAt(0)+';';
});
このコードは、与えられた範囲(ユニコード00A0〜9999、およびアンパサンド、greater & less than)のすべての文字を、htmlエンティティに相当する文字に置き換えるもので、これは、単純に
&#nnn;
ここで
nnn
から取得したユニコード値です。
charCodeAt
.
実際の動作はこちらでご覧ください。 http://jsfiddle.net/E3EqX/13/ (この例では、使用する要素セレクタにjQueryを使用しています。上記のベースコード自体は、jQueryを使用していません)
文字エンコーディングがUTF8であることを確認し、データベースが文字列をUTF8で保存していることを確認してください。あなたは まだ システムフォントの設定やその他の問題により、文字が正しく表示されない場合があります。
ドキュメンテーション
-
String.charCodeAt
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt - HTML文字エンティティ http://www.chucke.com/entities.html
関連
-
[解決済み】Vueのテンプレートまたはレンダー関数が定義されていない 私はどちらも使っていないのですが?
-
[解決済み】ETIMEDOUTエラーの対処方法は?
-
[解決済み】未定義のプロパティ 'forEach' を読み取ることができない
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでURLをエンコードする?
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】node.js TypeError: path must be absolute or specify root to res.sendFile [JSONのパースに失敗しました]。
-
[解決済み】TypeError: 'undefined'はオブジェクトではありません。
-
[解決済み】JavaScriptのisset()に相当するもの
-
[解決済み] React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined [duplicate] (未定義のプロパティ'state'を読み込むことはできません。
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】 Uncaught Reference Error: stLight is not defined (in Chrome only)
-
[解決済み】JavaScriptで関数が存在するかどうかを確認する方法は?
-
[解決済み】Vueが定義されていない
-
[解決済み] Uncaught (in promise) TypeError: フェッチに失敗してCorsエラー
-
[解決済み] XML文書でエスケープする必要がある文字は何ですか?