JavaScriptで正規表現をデバッグする方法は？

JavaScriptと正規表現の両方が新しくなりました。私は、Webページ内の（何でも）何度でも％00>の一連のものを置き換える簡単な作業をしています。何とかregExpは特定の条件でのみ動作します。JavaScriptで正規表現をデバッグする方法は？

Expressionが間違っているか、document.body.HTMLにアクセスする方法が間違っているかどうかはわかりません。コード内に「作業」と「動作していません」という注意書きを書き留めてください。私たちは、innerHTMLプロパティについて話すとき、ブラウザは< &としてLTを解釈するために起こる

<html> 
<head> 
    <script> 
    </script> 
</head> 
<body> 
    Hello, my items are <%abc%>, <%efg%>, <%hik%><p/> 
    <p/> 
</body> 
<script> 
var Transform = function() { 
    var regExp = /<%\^?\w+?\.?\w+?%>/gi; 
    document.body.innerHTML = document.body.innerHTML.replace(/Hello/g,"Hi"); //works 
    document.body.innerHTML = document.body.innerHTML.replace(/my/g,"your"); //works 
    document.body.innerHTML = document.body.innerHTML.replace(/\<%/g,"("); //not working 
    document.body.innerHTML = document.body.innerHTML.replace(/%\>/g,")"); //not working 
    return; 
} 
teststr="<%abc%>"; 
teststr=teststr.replace(/\<%/g,"("); 
teststr=teststr.replace(/%\>/g,")"); //works show as (abc) 
console.log(teststr) 
Transform(); 
</script> 
</html>

出典

2017-02-15 S Suen

@siam欲しいものだと思う：いいえ、 '％は'正規表現の特殊文字ではありません。（ '<' and '>' too） –

コードで多くの問題があります：彼らは違法なHTMLタグであるため、

<%abc%>（および他のもの）は、テキストに変換されます。したがって、document.body.innerHTMLを見ると、<%abc%>のようなものが表示されます。何をする必要があるのかによって、.innerTextの埋め込みコード.innerHTMLを使って回避することができます。
オープニング<body>タグの後のものは、bodyタグに押し込まれます。あなたのスクリプトも.innerHTMLの一部です。この問題を解決するには、<head>にスクリプトを追加し、本体が設定された後にコードを実行するようにwindow.onloadを設定します。あるいは、あなたのコンテンツを体内の<div>に入れて、それを置き換えることもできます。

.innerHTMLが4回発生しています。これは後で問題を引き起こす可能性があります。代わりに、同じ文字列を操作して.innerHTMLを1回設定することもできます。

何かがうまくいかない場合

<html> 
 
<head> 
 
    <script> 
 
    console.clear() 
 
var Transform = function() { 
 
    var regExp = /<%\^?\w+?\.?\w+?%>/gi; 
 
    document.body.innerHTML = document.body.innerHTML 
 
     .replace(/Hello/g,"Hi") //works 
 
     .replace(/my/g,"your") //works 
 
     .replace(/&lt;%/g,"(") //now working!! 
 
     .replace(/%&gt;/g,")"); //now working!! 
 
    return; 
 
} 
 

 
    window.onload = Transform; 
 
    </script> 
 
</head> 
 
<body> 
 
    Hello, my items are <%abc%>, <%efg%>, <%hik%><p/> 
 
    <p/> 
 
</body> 
 
</html>

は、動作していない部分に最も近いポイントから開始して、コードを逆方向に進みます。コンソールに物事を記録して（console.log）、値が期待どおりであることを確認してください。あなたのコードが正しい順序で実行されていることを確認してください。のログには、のログが記録されています。

出典

2017-02-15 20:04:16 Whothehellisthat

ありがとうございます。私はまた、キーが< and >の代わりに>と<を使用することを発見しました。あなたが言ったように、変数に格納されているテキストの場合は、HTMLコンテンツがストレートテキストではなくエンコードされます。 –

。および>として定義される。

したがって、次のデモのように正規表現を変更する必要があります。

var teststr = document.body.innerHTML; 
 
teststr = teststr.replace(/&lt;%/g,"("); 
 
teststr = teststr.replace(/%&gt;/g,")"); 
 
console.log(teststr);

<body> 
 
    Hello, my items are <%abc%>, <%efg%>, <%hik%> 
 
</body>

重要：体のinnerHTMLプロパティは、（あなたがそのスクリプトがコンソールに印刷されて気づいた場合）、スクリプトが含まれますましょう。これを避けて、代わりにquerySelectorsを使用するか、スクリプトを<head>セクションに置くようにしてください。

出典

2017-02-15 19:54:48

投票者の説明に注意を払うことができますか？ –

私は、これはあなたが

const data = `<p></p><% <b>here is some text</b> %> 
 
    <% you probably want to do something more %> 
 
    <% x = 2 * 2 ?%>` // inner html 
 

 
const parse = (data) => data.replace(/<(?:%|&lt;)((?:\n|.)*?)(?:%|&gt;)>/g, data => { 
 
    // calc value to replace here 
 
    return data 
 
}) 
 

 
// here is just replacement 
 
const parse2 = (data) => data.replace(/<(?:%|&lt;)((?:\n|.)*?)(?:%|&gt;)>/g, '$1') 
 

 
console.log(parse2(data))

出典

2017-02-16 07:24:10

JavaScriptで正規表現をデバッグする方法は？

答えて

関連する問題