Question

我想在每个斜杠（/）字符之后添加一个空格，该字符不是html标记的一部分。因此，如果元素的内容如下：

<strong>Occupational/technical/eduction/training program:</strong><br />
Started before 1/1/12.<br />
More text <i>description</i> more/text/with/slashes.

我想在每个斜杠后添加一个空格，但不要在结束标记中添加斜杠（例如＆lt; / strong＆gt;）或者在break＆lt; br /＆gt;中添加空格。标签，因为在标签中的斜杠后添加空格会导致浏览器错误地呈现它们。

现在，我有：

jQuery("table tr td:nth-child(2)").each(function() {
    var tdContent = jQuery(this).html();
    slashSpace = tdContent.replace(/\//g, "/ ");
    $(this).empty().append(slashSpace);

});

关闭，但这会为所有斜杠添加空间，包括html标记。我设置了这个jsFiddle：http://jsfiddle.net/Ejp4r/。如您所见，向结束标记添加空格会导致第二个单元格错误。

似乎应该相当容易，但我画了一个空白。有什么想法吗？

Answer 1

您的正则表达式只需显式匹配未被<或>包围的斜杠：

tdContent.replace(/([^<])\/([^>])/g, "$1/ $2");

在正则表达式中，[^...]表示“在此集合中匹配字符不”。正则表达式现在将与*/*匹配，但不会与</或/>匹配。

Works

Answer 2

使用正则表达式的替代方法，您可以遍历文本节点以应用需要更改的内容：

var textNodes = function textNodes(parent, cb) {
  [].slice.call(parent.childNodes).forEach(function (node) {
    switch (node.nodeType) {
      case 1: textNodes(node, cb); break;
      case 3: cb(node); break;
    }
  });
};

$('table').each(function () {
  textNodes(this, function (node) {
    node.nodeValue = node.nodeValue.replace(/\//g, '\/ ');
  });
});

http://jsbin.com/ohezud/2/

Answer 3

尝试使用.text(...)代替.html(...)，例如FIDDLE

Answer 4

如果你不想弄乱正则表达式，试试这个：

$("table tr td:nth-child(2)").each(function() {

    var children = $(this).find();

    if( children.length > 0 ) {
        children.each(function(){
            $(this).html( $(this).html().replace(/\//g, "/ ") ); 
        });
    } else {
        $(this).html( $(this).html().replace(/\//g, "/ ") );
    }

});

在不属于html标记的斜杠后添加空格

4 个答案: