2

テキスト エディターのスマイリー ショートカットを img タグに置き換えていますが、使用するロジックでは、リンクとタグの一部もスマイリー ショートカットとして認識されます (たとえば、http://の:/またはスタイルの cursor:pointer の: p ) 。属性）

スマイリー ショートカットを画像に置き換えるときに、すべてのリンクと html タグを無視するにはどうすればよいですか?

for(var key in shortcuts){
    // Check if the editor html contains the looped shortcut
    if(content.toLowerCase().indexOf(key) != -1){
        // Escaping special characters to be able to use the shortcuts in regular expression
        var k = key.replace(/[<>*()?']/g, "\\$&");

        // Make shortcuts case insensitive
        var regex = new RegExp(k, "ig");

        //Replace shortcuts with img tags (smileys)
        tinymce.activeEditor.setContent(content.replace(regex,'<img src="images/transparent.png" class="smiley_icon '+ shortcuts[key] +'">'));
    }
}
4

1 に答える 1

6

説明

私がこれにアプローチする方法は、すべての良いものとすべての悪いものを一致させることだと思います. 次に、式では、関心のあるテキスト グリフのみをキャプチャ グループに入れます。プログラミング ロジックの後半で、各一致をテストして、キャプチャ グループ 1 が入力されているかどうかを確認.indexします。一致が発生しました。

この式は、、、、タグと URL をすべて検出します:/が:)、:pキャプチャ グループ 1 には、タグまたは URL の一部ではない、、、:)または:/のみが含まれます。:p

https?:\/\/[^\s]*|<\/?\w+\b(?=\s|>)(?:='[^']*'|="[^"]*"|=[^'"][^\s>]*|[^>])*>|(:\)|:P|:\/)

ここに画像の説明を入力

エキスパンド

  • https?:\/\/[^\s]*プレーンテキストの URL に一致します
  • |また
  • <\/?\w+\b(?=\s|>)(?:='[^']*'|="[^"]*"|=[^'"][^\s>]*|[^>])*>HTML の開始タグまたは終了タグに一致します
  • |また
  • (:\)|:P|:\/)キャプチャ グループ 1 は、目的のテキスト グリフを取得します

例：

実際の例: http://regexr.com?35cv9 (青色の一致にカーソルを合わせると、各キャプチャ グループとインデックスが表示されます)

サンプルテキスト

<a href=http://i.like.kittens style="cursor:point"> :) I had a :/ great time :p </a> check out http://some.url.com

マッチ

[0] => Array
    (
        [0] => <a href=http://i.like.kittens style="cursor:point">
        [1] => :)
        [2] => :/
        [3] => :p
        [4] => </a>
        [5] => http://some.url.com
    )

[1] => Array
    (
        [0] => 
        [1] => :)
        [2] => :/
        [3] => :p
        [4] => 
        [5] => 
    )
于 2013-06-28T13:06:56.877 に答える