Question

我在blockquote中有这个文本：

<blockquote class="tr_bq">
4 Text<br />
20 TExt<br />
2 Another text a little longer<br />
<br />
20 text</blockquote>

我想为每一行添加标记或转换br以包含一个类。如果br包括所有的线路，我会知道如何做到这一点。这就是我想要结束的方式：

<blockquote class="tr_bq">
<strike>4 Text</strike><br/>
<strike>20 TExt</strike><br/>
<strike>2 Another text a little longer</strike><br/>
<br />
<strike>20 text</strike></blockquote>

或

<blockquote class="tr_bq">
<br class="X">4 Text<br>
<br class="X">20 TExt<br>
<br class="X">2 Another text a little longer<br>
<br />
<br class="X"> 20 text</br></blockquote>

我已尝试过包装，但没有成功，无论如何都可以这样做？

Answer 1

您可以通过操纵blockquote的内部HTML来完成此操作。

$('.tr_bq').each(function () {
    var html = $(this).html();
    var newHtml = html.split('<br>').map(function (str) {
        return '<strike>' + str + '</strike>';
    }).join('<br>');
    $(this).html(newHtml);
});

Answer 2

提供一种简单的JavaScript方法来实现这一点，避免（不必要）使用库：

function wrapNodesWith(nodes, tag) {
  // if we have neither nodes to wrap, nor a tag to wrap
  // them with, we quit here:
  if (!nodes || !tag) {
    return false;
  }

  // otherwise:

  // we convert the nodes to an array (using Array.prototype.slice,
  // in conjunction with Function.prototype.call):
  nodes = Array.prototype.slice.call(nodes, 0);

  // if the tag parameter passed to the function is a string ('strike'),
  // we create that element using document.createElement(tag),
  // otherwise we assume we've got an HTMLElement (this is a very
  // naive check) and so we use that:
  tag = 'string' === typeof tag ? document.createElement(tag) : tag;

  // an unitialised variable for use within the following forEach:
  var clone;

  nodes.forEach(function(n) {
    // n is the node over which we're iterating,

    // cloning the tag (to avoid multiple calls
    // to document.createElement):
    clone = tag.cloneNode();

    // setting the textContent of the clone to the nodeValue
    // of the node (if it's a textNode), or to the textContent of
    // element (again a simple check):
    clone.textContent = n.nodeType === 3 ? n.nodeValue : n.textContent;

    // replacing the childNode, using parentNode.replaceChild(),
    // inserting clone and removing n:
    n.parentNode.replaceChild(clone, n);
  });

}

// finding the first <blockquote> element:
var blockquote = document.querySelector('blockquote'),
    // creating an array of the childNodes of the <blockquote>:
    children = Array.prototype.slice.call(blockquote.childNodes, 0),
    // filtering the children array, retaining only those nodes for
    // which the assessment returns true:
    textNodes = children.filter(function(n) {
      return n.nodeType === 3;
    });

// can be called with:
wrapNodesWith(textNodes, 'strike');

// or:
wrapNodesWith(textNodes, document.createElement('strike'));

function wrapNodesWith(nodes, tag) {
  if (!nodes || !tag) {
    return false;
  }

  nodes = Array.prototype.slice.call(nodes, 0);
  tag = 'string' === typeof tag ? document.createElement(tag) : tag;

  var parent, clone;

  nodes.forEach(function(n) {
    clone = tag.cloneNode();
    clone.textContent = n.nodeType === 3 ? n.nodeValue : n.textContent;
    n.parentNode.replaceChild(clone, n);
  });

}

var blockquote = document.querySelector('blockquote'),
  children = Array.prototype.slice.call(blockquote.childNodes, 0),
  textNodes = children.filter(function(n) {
    return n.nodeType === 3;
  });

wrapNodesWith(textNodes, 'strike');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote class="tr_bq">
  4 Text
  <br />20 TExt
  <br />2 Another text a little longer
  <br />
  <br />20 text
</blockquote>

参考文献：

Answer 3

好吧，

我设法让它解决这个问题：

   var pre = document.getElementsByTagName('blockquote'),pl = pre.length;
   for (var i = 0; i < pl; i++) {
     var pro = pre[i].innerHTML.split(/<br>/), pz = pro.length;
     pre[i].innerHTML = '';
     for (var a=0; a < pz ; a++) {
     pre[i].innerHTML += '<strike>' + pro[a] + '</strike><br/>';
     }
    }

Jquery在标记之前在blockquote中添加标记

3 个答案: