[解決済み] \JSのコードに "gucci "という文字がある。どこから来たんだ?
質問
NetBeans IDE 7.0.1を使用して、Webアプリのフロントエンドを開発しています。最近、非常に厄介なバグが発生し、最終的に修正しました。
例えば、次のようなコードです。
var element = '<input size="3" id="foo" name="elements[foo][0]" />';
$('#bar').append(element);
を見たとき、何かが間違っていることに気がつきました。
size
属性は、Chromeでは機能しません(他のブラウザでは確認していません)。インスペクタでその要素を開くと、次のように解釈されました。
<input id=""3"" name=""elements[foo][0]""
size=""foo"" />
というのは、かなり不思議でした。手動で再入力した後
element
の文字列を文字単位で入力すると、バグがなくなりました。この変更を元に戻したとき、Netbeansが私の古いコードにあるいくつかのユニコード文字について警告していることに気づきました。それは
\u200b
- の後、[]['の間、そして文字列の最後には幅ゼロのスペースがあります。ゼロ幅のスペースは表示されないので、文字列は正常に見えますが、それらをエスケープした後の文字列は
'<input size=\u200b"3" id=\u200b"foo" name=\u200b"elements[foo]\u200b[0]" />\u200b'
さて、一体どこで手に入れたのでしょう?
のコードをどこにコピーしたのかよくわからない。
element
のどちらかであることは間違いありません。
- Netbeans Editor の他のペインで、HTML テンプレートファイルを表示します。
- Google Chromeのインスペクタ、「HTMLとしてコピー」アクション。
- Google Chromeのソース表示ページ(かなり怪しい)
しかし、そのどちらでもバグが再現できない。
Windows7でNetbeans7.0.1、Google Chrome13.0を使用しています。キーボードスイッチャーなどは起動していません。また、バージョン管理にはGitを使っていますが、そのコードを引っ張ってきたわけではないので、Gitが原因である可能性は非常に低いと思います。同僚はとてもマナーが良いので、馬鹿な冗談を言うわけにもいきません。
私のコードを台無しにしたのは誰なのか、何か心当たりはありませんか?
解決方法は?
ここで一刺し。
Google Chromeのインスペクターに賭ける。 検索 Chromium のソースから、私は 次のブロックのコード
if (hasText)
attrSpanElement.appendChild(document.createTextNode("=\u200B\""));
if (linkify && (name === "src" || name === "href")) {
var rewrittenHref = WebInspector.resourceURLForRelatedNode(node, value);
value = value.replace(/([\/;:\)\]\}])/g, "$1\u200B");
attrSpanElement.appendChild(linkify(rewrittenHref, value, "webkit-html-attribute-value", node.nodeName().toLowerCase() === "a"));
} else {
value = value.replace(/([\/;:\)\]\}])/g, "$1\u200B");
var attrValueElement = attrSpanElement.createChild("span", "webkit-html-attribute-value");
attrValueElement.textContent = value;
}
単に私が間違っている可能性もありますが、属性の表示時にゼロ幅のスペースが挿入されているように見えます(テキストのソフトラッピングを処理するため?おそらく、quot;Copy as HTML"機能で適切に削除されていないのでは?
更新情報
Chromeの要素インスペクタをいじってみたところ、迷子の
\u200b
が出てきました。可視スペースだけでなく
=
でマッチした文字、または
/([\/;:\)\]\}])/
を挿入することで、ゼロ幅のスペースを確保することができます。
<イグ
残念ながら、クリップボードに誤って含まれてしまうという問題を再現することはできません(Win XPでChrome 13.0.782.112を使用しました)。
それは確かに価値がある バグレポートを提出する この挙動を再現することができるのであれば、ぜひ試してみてください。
関連
-
[解決済み】Facebook Graph API のクエリで with=location を使用すると "Uncaught (in promise) undefined" というエラーが発生する。
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】React Js: Uncaught (in promise) SyntaxError: 位置 0 の JSON で予期しないトークン < が発生しました。
-
[解決済み】webpack-dev-serverにリモート接続すると、「Invalid Host header」というメッセージが表示されます。
-
[解決済み】Google Conversionsが動作しない - スクリプトが読み込まれない
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み】Reactのeslintエラーはpropsの検証で見つからない
-
[解決済み】DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】ETIMEDOUTエラーの対処方法は?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】document.getElementByIDは関数ではありません。
-
[解決済み】JavaScriptのisset()に相当するもの
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み] [Solved] Uncaught TypeError: nullのプロパティ 'appendChild' を読み取ることができない。
-
[解決済み】React、Uncaught ReferenceError。ReactDOMは定義されていません
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】 Uncaught Error: Invariant Violation: 解決済み】 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object.
-
[解決済み】'useState' が定義されていない no-undef React
-
[解決済み】"Unexpected token ILLEGAL "の原因が見えない