正则表达式的新手.在所有结束标记后添加空白

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的假元素中，然后它被添加到传递给树漫步器的文档片段中。在这里，我们只考虑元素节点(SHOW_ELEMENT)，并在其后面插入一个空白元素。您可以调整文本内容(插入制表符、空格或换行符)。

你的代码已经很好了，你只需要检查你是否在文本的末尾插入了一些东西。我添加了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(/[rn]/g,'.').indexOf(r.text.replace(/[rn]/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 + 'u200C' + 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>