Jquery在标记之前的块引号中添加标记

Jquery add tag inside a blockquote before a tag

本文关键字:添加 加标记 Jquery      更新时间:2023-09-26

我在一个块引号中有这样的文本:

<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>

我试过用保鲜膜,但没有成功,有什么办法吗?

您可以通过操作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);
});

只是为了提供一种简单的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>

参考文献:

  • CCD_ 1
  • CCD_ 2
  • Array.prototype.slice()
  • 条件('ternary')运算符
  • document.createElement()
  • document.querySelector()
  • Function.prototype.call()
  • Node.nodeValue
  • Node.replaceChild()

好吧,

我设法使它与这个工作:

   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/>';
     }
    }