的背景

Question

的背景

我正在为我的网页创建一个@Name标记系统。我已经成功地在按键上找到了名字，并用等效的div class='tag' data-id='User-id'>Name</div>替换内容（至少用于显示）。现在在从contentEditable div提交这些内容之前。我在textarea（通常是隐藏的）中修改它们。

的工作

.keyup事件发生contentEditable后，contentEditable的所有内容都会被MakeItForWeb(contentEditable)处理。然后操作将由服务器端textarea脚本处理的php的内容。 php脚本将删除所有标记，然后将数据存储在DB中。所以在提交之前我尝试用以下格式的数据替换所有.tag div：

@["id":"User-id","Tag":"User-Name"];

在<textarea>中，我在regular expression中创建了javascript来完成任务。并且它工作正常，当单行中有单.tag时，您可以看到它Here。

的问题

当一行中出现多于1 .tag时，我的regex无法正确识别所有这些，并且只识别其中的最后一行。因此整个标记系统崩溃，你可以看到它Here。可能是我的方法是错的。请问专家可以帮帮我吗？任何建议都是受欢迎的。

我的努力（代码）

JavaScript + JQuery：

$(document).ready(function(){
    $("body").attr("spellcheck","false");
    $("#tarea").keyup(function(e){ // Process KeyUp Event
         /* Code to find Names on @N..and create a tag is omitted purposefully as it is working fine */ 
        // Make each tag Un-editable, So that User cant change it
        $(".tag").each(function(){
        $(this).attr("contentEditable","false");
        });
       //Manipulate the textarea with equivalent value
       MakeItForWeb(this);
    }).focus(function(){
       //Manipulate the textarea with equivalent value from contentEditable
        MakeItForWeb(this);
    });
    $("#tarea").trigger("keyup"); // Trigger keyUp event as soon as DOM ready.
});
function MakeItForWeb(x){
    var htm=$(x).html(); // Contents of contentEditable
    htm=htm.split("<br>").join("\n"); // Replace <br> with \n character
    htm=htm.split("&nbsp;").join(" "); 
    htm=htm.trim(); // Trim contents
    /* Here is My regex which does the mentioned task */
    htm=htm.replace(/<div(.*) data-id=\"(.*)\" (.*)>(.*)<\/div>/g,"@['id':'$2','tag':'$4'];");
    document.getElementById("opc").value=htm; // <textarea> = ContentEditable processed.
}

<小时/> 注意行：

htm=htm.replace(/<div(.*) data-id=\"(.*)\" (.*)>(.*)<\/div>/g,"@['id':'$2','tag':'$4'];");
// This is My Regex.
// where var htm=contentEditable.innerHTML;

HTML：

<div id="tarea" contentEditable="true" class="tarea" autocorrect="false" spellCheck="off">
    Hello Says! <div class="tag" data-id="1005">Vedant Terkar</div> , <br />To all <div class="tag" data-id="1006">SO Users</div>&nbsp; :-).
</div>
<!-- This textarea is Usually Hidden -->
<textarea id="opc" rows="5" cols="97">
</textarea>

css与问题无关，所以不发布。

希望这里的专家能帮助我。在此先感谢:-)！

Answer 1

从索引1和2获取匹配的组。我使用 Lazy 方式。

<div class="tag" data-id=\"([^\"]*?)\">([^<>]*?)<\/div>

这里是在线DEMO

尝试这个以获得＆＃34;您好说！＆＃34;和＃34;对所有人来说＃34;以及3个弹射器组。

>\s*([^<>]*)<div class="tag" data-id=\"([^\"]*?)\">([^<>]*?)<\/div>

这里是在线DEMO

Answer 2

正则表达式：

<div\b.*?\bdata-id=\"([^"]*)\">([^<]*).*?\/>([^<]*)<div\b.*?\bdata-id=\"([^"]*)\">([^<]*).*

替换字符串：

@['id':'$1','tag':'$2']; , $3@['id':'$4','tag':'$5'];

DEMO

正则表达式在contentEditable中提取div的特定属性和innerHTML

的背景

的工作

的问题

我的努力（代码）

2 个答案: