正则表达式的新功能。 在所有结束标记后添加空格

Question

全新的正则表达式。 我知道如何找到所有结束标记/<\\/.*?>/g,但是我需要在所有结束标记后添加一个空格。 这只是剥离所有结束标记： str = str.replace(/<\\/.*?>/g, ' ');

***稍后添加

好的，这就是整个脚本。 我不能在这里发布。 您可以在jsfiddle上查看它： https ://jsfiddle.net/bw6yfc7g/3/我希望它仅在结束和开始标记一个接一个地运行时才自动添加空格。 换句话说，在加粗后发布下划线时，标记应如下所示： <b></b> <u></u>但是，当它们相互内贴时，其外观应如下所示： <b><u></u></b>没有空格。

Answer 1

这是通过DOM实现的一种方法：

 function textNodesUnder(el){ var n, walk=document.createTreeWalker(el,NodeFilter.SHOW_ELEMENT,null,false); while(n=walk.nextNode()) { if (n.nodeName !== "MYELT") { ws_node = document.createTextNode(" "); n.parentNode.insertBefore(ws_node, n.nextSibling); } } return el.firstChild.innerHTML; } function addWsNodes(s) { var doc = document.createDocumentFragment(); var wrapper = document.createElement('myelt'); wrapper.innerHTML = s; doc.appendChild( wrapper ); return textNodesUnder(doc); } var s = "This is a <span>test</span>and another<br>test <span>here</span>."; console.log(addWsNodes(s)); // => This is a <span>test</span> and another<br> test <span>here</span> . 

在这里，HTML字符串输入被包含在具有myelt名称的假元素中，然后将其添加到传递给Tree Walker的文档片段中。 在那里，我们仅考虑元素节点（ SHOW_ELEMENT ），并在SHOW_ELEMENT插入空白元素。 您可以调整文本内容（插入选项卡，空格或换行符）。

UPDATE

您的代码已经很好，您只需要检查是否在文本末尾插入一些内容即可。 我添加了extra_ws变量，并且仅当起始位置是现有文本的结尾时才为其分配空格。 我还要添加一个检查，如果我们不在字符串的开头：

if (startPos === txta.value.length && startPos > 0) ...

 function addTagSel(tag, idelm) { var tag_type = new Array('<', '>'); // for BBCode tag, replace with: new Array('[', ']'); var txta = document.getElementById('wmd-input'); var start = tag_type[0] + tag + tag_type[1]; var end = tag_type[0] +'/'+ tag + tag_type[1]; var IE = /*@cc_on!@*/false; // this variable is false in all browsers, except IE var extra_ws = ""; // ADDED var offst = 0; if (IE) { var r = document.selection.createRange(); var tr = txta.createTextRange(); var tr2 = tr.duplicate(); tr2.moveToBookmark(r.getBookmark()); tr.setEndPoint('StartToEnd',tr2); var tag_seltxt = start + r.text + end; var the_start = txta.value.replace(/[\\r\\n]/g,'.').indexOf(r.text.replace(/[\\r\\n]/g,'.'),tr.text.length); if (start === txta.value.length && startPos > 0) { // HERE extra_ws = " "; // UP TO HERE offst = extra_ws.length; } txta.value = txta.value.substring(0, the_start) + extra_ws + tag_seltxt + txta.value.substring(the_start + tag_seltxt.length, txta.value.length); // AND HERE var pos = txta.value.length - end.length; // Sets location for cursor position tr.collapse(true); tr.moveEnd('character', pos + offst); // start position tr.moveStart('character', pos + offst); // end position tr.select(); // selects the zone } else if (txta.selectionStart || txta.selectionStart == "0") { var startPos = txta.selectionStart; var endPos = txta.selectionEnd; var tag_seltxt = start + txta.value.substring(startPos, endPos) + end; if (startPos === txta.value.length && startPos > 0) { extra_ws = " "; offst = extra_ws.length; } txta.value = txta.value.substring(0, startPos) + extra_ws + tag_seltxt + '\‌' + txta.value.substring(endPos, txta.value.length); // txta.value = addWsNodes(txta.value); // Place the cursor between formats in #txta txta.setSelectionRange((endPos+start.length+offst),(endPos+start.length+offst)); txta.focus(); } return tag_seltxt; } document.getElementById('big').onclick = function() { var tag_seltxt = addTagSel('big'); return tag_seltxt; } document.getElementById('b').onclick = function() { var tag_seltxt = addTagSel('b'); return tag_seltxt; } document.getElementById('i').onclick = function() { var tag_seltxt = addTagSel('i'); return tag_seltxt; } document.getElementById('u').onclick = function() { var tag_seltxt = addTagSel('u'); return tag_seltxt; } document.getElementById('del').onclick = function() { var tag_seltxt = addTagSel('del'); return tag_seltxt; }; 

 .edit_button { display: inline-block; color: black; padding: 5px; } 

 <a class="edit_button" id="big">&nbsp;<span class="titleicon"></span>&nbsp;</a> <a class="edit_button" id="b">&nbsp;B&nbsp;</a> <a class="edit_button" id="i">&nbsp;<i>I</i>&nbsp;</a> <a class="edit_button" id="u">&nbsp;<u>U</u>&nbsp;</a> <a class="edit_button" id="del">&nbsp;<del>S</del>&nbsp;</a> <textarea id="wmd-input"></textarea>